title: How to update an arrays state with onChange through Child component's input field
body: <p>I am trying to update an array which is within my Parent component's state. Each child component is created through an element from the Parent component's state array. Right now I have an onChange handler that is within my Parent component that I pass down to my Child component. </p>
  
  <p>Here are some snippets that have to do with this:</p>
  
  <p>Parent</p>
  
  <pre><code>class PropertyBar extends Component {
    state = {
      selectedCell: graph.selectedCell,
      cellProperties: []
    }
  
    onChangeHandler(e) {
      let cellProperties = [...this.state.cellProperties];
      cellProperties[e.target.name] = e.target.value;
      this.setState({cellProperties});
    }
  
    renderPropertyList() {
      return this.state.cellProperties.map(key =&gt; {
        return &lt;PropertyBarItem name={key.nodeName} value={key.nodeValue} onChange={this.onChangeHandler}/&gt;
      })
    }
  }
  </code></pre>
  
  <p>Child</p>
  
  <pre><code>class PropertyBarItem extends Component {
    constructor(props) {
      super(props);
    }
  
    onChangeHandler(e) {
      if (this.props.onChangeHandler) {
        this.props.onChangeHandler(e);
      }
    }
  
    render() {
      return (
        &lt;ListItem divider={true} className="property-bar-item"&gt;
          &lt;TextField
            id="property"
            label={this.props.name}
            value={this.props.value}
            margin="dense"
            onChange={(e) =&gt; {this.onChangeHandler(e)}}
          /&gt;
        &lt;/ListItem&gt;
      )
    }
  }
  </code></pre>
  
  <p>I don't think I am handling the <code>onChangeHandler</code> passed down correctly within my Child component, but I might have the logic wrong too.</p>