title: React Forms : How to make input data as list objects with same input name?
body: <p>I'm Posting input data to API's where the API's structure as array list with n objects.</p>
  <p>Problem: The problem I'm facing is while handling the change, i'm replacing the data instead of inserting as an another object.</p>
  <p>My code as follows:</p>
  <p>the objects in the list is dynamic not limited to two</p>
  <p>in Constructor-&gt;</p>
  <pre><code>this.state={
  formData: [
          {
            information: &quot;&quot;,
            from: &quot;&quot;,
            to: &quot;&quot;,
          },
          {
            information: &quot;&quot;,
            from: &quot;&quot;,
            to: &quot;&quot;,
          },
        ],
  }
  </code></pre>
  <p>handling the Change as follow:</p>
  <pre><code>handleChange = (e) =&gt; {
      const { name, value } = e.target;
      const { formData} = this.state;
      this.setState({
          formData: {
            ...formData,
            [name]: value,
          },
        });
  </code></pre>
  <p>Handle submit:</p>
  <pre><code>handleSubmit = (e) =&gt; {
      e.preventDefault();
      console.log(this.state.formData);
      }
  </code></pre>
  <p>Form fields as follows:</p>
  <pre><code>&lt;form onSubmit={this.handleSubmit}&gt;
  &lt;div&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;information&quot;   onChange={this.handleChange}   /&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;from&quot;          onChange={this.handleChange}   /&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;to&quot;            onChange={this.handleChange}   /&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;information&quot;   onChange={this.handleChange}   /&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;from&quot;          onChange={this.handleChange}   /&gt;
   &lt;input  type=&quot;text&quot;   name=&quot;to&quot;            onChange={this.handleChange}   /&gt;
  &lt;/div&gt;
  .
  .
  .
  &lt;button&gt; + Add new Set (div) &lt;/button&gt;
  &lt;button type=&quot;submit&quot;&gt; Submit &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I'm aware that mistake is handing logic but i tried lot to correct. Please help me out.</p>
  <p>Edit: Expected output:</p>
  <pre><code> [
          {                    
              &quot;information&quot;: &quot;info  1&quot;,
              &quot;from&quot;: 1,
              &quot;to&quot;: 50
          },
          {                    
              &quot;information&quot;: &quot;info  2&quot;,
              &quot;from&quot;: 51,
              &quot;to&quot;: 80
          },
          {
              &quot;information&quot;: &quot;info  3&quot;,
              &quot;from&quot;: 81,
              &quot;to&quot;: 100
          }
      ]
  </code></pre>