title: Updating a nested state setState in react
body: <p>Cannot figure out why this state will not update, there are other values other than personalValues that is why it is nested. </p>
  
  <p>The state</p>
  
  <pre><code>this.state = {
     personalValues: [
       {targetLevel: 0},
       {firstCommission: 0.36},
       {cancels: 0.10},
       {averagePolicy: 1150},
       {productionWeeks: 48},
       {presPerWeek: 15},
       {closingRate: 0.40},
       {appsPerWeek: 6}
     ]
  </code></pre>
  
  <p>The handler I tried</p>
  
  <pre><code>handleFormChange(event){
    this.setState({[event.target.name]: event.target.value})
  }
  </code></pre>
  
  <p>The Component</p>
  
  <pre><code>const personalFormValues =
      { 
        class: ["firstCommission", "cancels", "averagePolicy",
                "productionWeeks", "presPerWeek", "closingRate",
                "appsPerWeek"],
      };
  var className = personalFormValues.class[i];   
      &lt;TextField
                  className={className}
                  type="number"
                  placeholder={personalFormValues.placeholder[i]}
                  onChange={this.handleFormChange}
                  onBlur={this.changeValues}
                  name={className}
                  fullWidth={true}
                  pattern="[0-9]*"
                  required /&gt;
  </code></pre>