title: React live update input text form
body: <p>I am working on transforming an excel spreadsheet into a webapp. One issue I have is how to live update the "first-commission" value which is a nested child. How would I make that multiplication possible and update the state on textfield change without a submit? (Textfield is a material-ui component)</p>
  
  <pre><code>this.state = {
     personalValues: [
       {"first-commission":  (average-policy * closing * weeks)  },
       {cancels: 0},
       {"average-policy": 0},
       {weeks: 0},
       {presentationsPW: 0},
       {closing: 0},
       {appsPW: 0}
     ]
  </code></pre>
  
  <p>The Component (classNames are same as personalValues names, personalFormValues is a fill in array)</p>
  
  <pre><code>&lt;ul key={i}&gt;
      &lt;label&gt;
        {personalFormValues.name[i]}&lt;br/&gt;
        &lt;TextField
          className='${personalFormValues.class[i]}'
          type="number"
          value={this.state.personalValues['${personalFormValues.class[i]}']}
          onChange={this.handleFormChange}
          pattern="[0-9]*"
          required /&gt;
      &lt;/label&gt;
  </code></pre>
  
  <p>The form change method</p>
  
  <pre><code>handleFormChange(event){
    this.setState({[event.target.name]: event.target.value})
  }
  </code></pre>
  
  <p>I included a gif for clarification 
  <p><a href="https://giphy.com/gifs/1AIw43dsese4XyvEJR" rel="nofollow noreferrer">via GIPHY</a></p></p>