Handling user Input inside <ContactData /> Component

README.md

@@ -89,3 +89,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 2. Setting-up JS Config for the Form in `<ContactData />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/10c4e62025e610b6fb6259a0caa5311082a3f614)
 3. Creating `<Input />` Components Dynamically, based on the JS Config, inside the `<ContactData />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/dae73e0b18d53a5529df6fe706cf3432098da830)
 4. Adding a Drop Down Component for `<ContactData />` Component inside `<Input />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/2a9da1d69c9f242245c14fd6f19ca8d2d7161953)
+5. Handling User Input: [Commit Details]()

src/components/UI/Input/Input.component.jsx

@@ -41,13 +41,12 @@ const input = props => {
   let inputElement = null;
   switch (props.elementType) {
     case 'textarea':
-      inputElement = <TextArea
-        {...props.elementConfig} value={props.value} />;
+      inputElement = <TextArea {...props.elementConfig} value={props.value} onChange={props.changed}/>;
       break;
 
     case 'select':
       inputElement = (
-        <Select value={props.value}>
+        <Select value={props.value} onChange={props.changed}>
           {props.elementConfig.options.map(option =>
             <option key={option.value} value={option.value}>
               {option.displayValue}
@@ -59,8 +58,7 @@ const input = props => {
 
     case 'input':
     default:
-      inputElement = <Input
-      {...props.elementConfig} value={props.value} />;
+      inputElement = <Input {...props.elementConfig} value={props.value} onChange={props.changed}/>;
   }
 
   return (

src/containers/Checkout/ContactData/ContactData.component.jsx

@@ -126,22 +126,35 @@ class ContactData extends Component {
     });
   };
 
+  inputChangedHandler = (event, inputIdentifier) => {
+    // we cannot directly access and mutate the state, we have
+    // to always copy the required state, mutate the copy, and
+    // then use setState() to set the state to the new state.
+
+    const orderForm = { ...this.state.orderForm }; // does not create a deep copy of the nested objects => we need to create a deep clone manually
+    const formElementCopy = { ...orderForm[inputIdentifier] }; // deep copy of the first nested object
+    formElementCopy.value = event.target.value;
+    orderForm[inputIdentifier] = formElementCopy;
+    this.setState({ orderForm });
+  }
+
   render() {
     const formElementsArray = [];
-    for (let key in this.state.orderForm) {
+    for (let key in this.state.orderForm)
       formElementsArray.push({
         id: key, 
         config: this.state.orderForm[key]
-      })
-    }
+      });
+
     let form = (
       <form>
-        {formElementsArray.map(formElement => (
+        {formElementsArray.map((formElement) => (
           <Input
             key={formElement.id}
             elementType={formElement.config.elementType}
             elementConfig={formElement.config.elementConfig}
             value={formElement.config.value}
+            changed={(event) => this.inputChangedHandler(event, formElement.id)}
           />
         ))}
         <Button type="success" onClick={this.orderHandler}>