title: React setState multiple arrays based on index
body: <p>I have a rather tricky question to ask,
  I'm working on a page that accepts several inputs from the Data-Base
  and with that I'm generating several inputs( the number of inputs  is not constant)</p>
  
  <p>basically like this:</p>
  
  <pre><code> const form = this.state.inputs.map((input, i) =&gt; {
        if (input) {
          return (
            &lt;div key={i}&gt;
              &lt;div&gt;
                &lt;label htmlFor={input.inputLabel}&gt;{input.inputName}&lt;/label&gt;
              &lt;/div&gt;
              &lt;div className="form-input"&gt;
                &lt;input
                  name={`${input.inputName}-${i}`}
                  type={input.inputType}
                  id={input.inputLabel}
                  onChange={this.onChange}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      });
  </code></pre>
  
  <p>after generating the form with the unknown number of values ( depends on the Data-Base)
  I want to save all the values of that form, but because I do not know the number of inputs I made 2 arrays ( I need to save the value and the name to be later shown in a different page)</p>
  
  <pre><code>  state = {
    ....
      inputData: {
        names: [],
        values: []
      }
    ....
    };
  </code></pre>
  
  <p>but I'm having trouble of actually saving the values in the setState </p>
  
  <pre><code> onChange = e =&gt; {
      e.preventDefault();
      const { name, value } = e.target;
      var nameIndex = name.split('-');
      const names = [];
      const values = [];
      values[nameIndex[1]] = value;
      names[nameIndex[1]] = nameIndex[0];
      const inputData = { names, values };
      this.setState({ inputData });
    };
  </code></pre>
  
  <p>the setState works like this:
  on my map I give each input a name that contains the index that's generated by the map so the name is like "inputname-1", and I use split to take out the 1 and update the two arrays I did in the setState (values,names) and everytime the user writes in the input it changes the value inside the array like so: values[1]=(users input...) ,
  but I noticed that if I change the 2nd value for example, the values before him in the index 1 and 0 become undefined, am I missing something?</p>