Creating <Input /> Components Dynamically, based on the JS Config,

inside the `<ContactData />` Component

README.md

@@ -87,3 +87,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 
 1. Creating a Custom Dynamic `<Input />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/3576b226a1f6c453948052e66b10a3da85da10cc)
 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]()

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

@@ -127,31 +127,23 @@ class ContactData extends Component {
   };
 
   render() {
+    const formElementsArray = [];
+    for (let key in this.state.orderForm) {
+      formElementsArray.push({
+        id: key, 
+        config: this.state.orderForm[key]
+      })
+    }
     let form = (
       <form>
-        <Input
-          elementType="input"
-          elementConfig="..."
-          value="..."
-        />
-        <Input
-          input_type="input"
-          type="email"
-          name="email"
-          placeholder="Your E-Mail"
-        />
-        <Input
-          input_type="input"
-          type="text"
-          name="street"
-          placeholder="Street Address"
-        />
-        <Input
-          input_type="input"
-          type="text"
-          name="postal"
-          placeholder="Postal Code"
-        />
+        {formElementsArray.map(formElement => (
+          <Input
+            key={formElement.id}
+            elementType={formElement.config.elementType}
+            elementConfig={formElement.config.elementConfig}
+            value={formElement.config.value}
+          />
+        ))}
         <Button type="success" onClick={this.orderHandler}>
           ORDER
         </Button>