title: How to create dynamic form input fields in React with ANTd
body: <p>Codesandbox link:
  <a href="https://codesandbox.io/s/compassionate-sanderson-1m8nv?file=/src/App.js" rel="noreferrer">https://codesandbox.io/s/compassionate-sanderson-1m8nv?file=/src/App.js</a></p>
  <p>I have not been able to find much information on this topic. The following is what I want to achieve:</p>
  <p>I want the user to be able to edit some details of a purchase order that already exists in the database, then resubmit the purchase order with a form. The details of the original purchase order should be displayed in the form input fields, and the user can change them directly via those field and then submit.</p>
  <p>I am not savvy with web development so please bear with me.</p>
  <p>I want the final form object to look like this:</p>
  <pre><code>{
      po_number:&quot;123abc&quot;,
      carrier:&quot;Fastway&quot;,
      items: [{
                  item_code:&quot;dnh75n&quot;,
                  quantity:&quot;10&quot;,
                  special_requirements:&quot;Add picture of happy dog&quot;
              },
              {
                  item_code:&quot;456def&quot;,
                  quantity:&quot;4&quot;,
                  special_requirements:&quot;Do not include lids&quot;
              }
          ]
  }
  </code></pre>
  <p>The number of form input fields generated will be based off how many items are in the purchase order. I have created a simple React component below to demonstrate what I am trying to do. Or just checkout out the code sandbox link above. Any help would be appreciated. I can't even find information on how to group ANTd form items to create the array of items in the purchase order. I've seen plenty of dynamic form examples on their website but I want to create the form based on the preexisting items in the purchase order, not add fields with user input.</p>
  <pre><code>import { Form, Input, Button } from 'antd';
  
  //This is the order that already exists
  const order = {
      po_number:&quot;123abc&quot;,
      carrier:&quot;Fastway&quot;,
      items: [{
                  item_code:&quot;dnh75n&quot;,
                  quantity:&quot;10&quot;,
                  special_requirements:&quot;Add picture of happy dog&quot;
              },
              {
                  item_code:&quot;456def&quot;,
                  quantity:&quot;4&quot;,
                  special_requirements:&quot;Do not include lids&quot;
              }
          ]
  };
  
  
  const GroupForm = () =&gt; {
  
      const onFinish = values =&gt; {
          console.log(values);
      }
      
  
      //Create form fields based off how many items are in the order
      const itemInputs = order.items.map(item =&gt; {
          return (
              &lt;div&gt;
                  &lt;b&gt;Item{&quot; &quot; + item.item_code}&lt;/b&gt;
                  &lt;Form.Item name={item.item_code + &quot;_quantity&quot;} label=&quot;quantity&quot;&gt;
                      &lt;Input defaultValue={item.quantity} style={{width: &quot;500px&quot;}} /&gt;
                  &lt;/Form.Item&gt;
  
                  &lt;Form.Item name={item.item_code + &quot;_requirements&quot;} label=&quot;speacial requirements&quot;&gt;
                      &lt;Input defaultValue={item.special_requirements}  style={{width: &quot;500px&quot;}} /&gt;
                  &lt;/Form.Item&gt;
              &lt;/div&gt;
          );
      });
  
      return(
          &lt;div&gt;
              &lt;Form onFinish={onFinish}&gt;
                  &lt;b&gt;{&quot;Order &quot; + order.po_number}&lt;/b&gt;
                  
                  &lt;Form.Item name=&quot;carrier&quot; label=&quot;carrier&quot;&gt;
                      &lt;Input defaultValue={order.carrier} style={{width: &quot;500px&quot;}} /&gt;
                  &lt;/Form.Item&gt;
  
                  &lt;b&gt;Order Items&lt;/b&gt;
  
                  {itemInputs}
  
                  &lt;Form.Item&gt;
                      &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot;&gt; Change Details &lt;/Button&gt;
                  &lt;/Form.Item&gt;
              &lt;/Form&gt;
          &lt;/div&gt;
      );
  }
  
  export default GroupForm;
  
  </code></pre>