Nested form state and one onChange function in React
<p>I'm working on a form in React. I have nested state in MatchForm component and "bind" values from state with different inputs. I would like to have on onChange function which manages all cinput changes and pass it to state. Current onChange function works when I have only lineup inputs. But when I added other inputs I have no idea how to handle with it. How should I name inputs and how onChange function should look like to work with all inputs (without many ifs)?</p>

<p>Thank you in advance </p>

<pre><code>class MatchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lineup: {
        setter: '',
        receiver1: '',
        receiver2: '',
        attacker: '',
        blocker1: '',
        blocker2: '',
        libero: ''
      },
      distribution: {
        receiver1: 20,
        receiver2: 20,
        attacker: 20,
        blocker1: 20,
        blocker2: 20
      },
      risk: 'normal',
      default: false
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({lineup: { ...this.state.lineup, [e.target.name]:e.target.value } })
    }

  render() {
    return (
      &lt;div&gt;
        {
          Object.keys(this.state.lineup).map((el,i) =&gt;
            &lt;select
              key={i}
              name={el}
              onChange={this.onChange}
              value={this.state.lineup[el]}
            &gt;
              &lt;option value="" disabled&gt;{el}&lt;/option&gt;
              &lt;option value="Marian Noga"&gt;Marian Noga&lt;/option&gt;
              &lt;option value="Janek Kowalski"&gt;Janek Kowalski&lt;/option&gt;
            &lt;/select&gt;
          )
        }
        {
          Object.keys(this.state.distribution).map((el,i) =&gt;
            &lt;Field
              key={i}
              field={el}
              label={el}
              type='number'
              value={this.state.distribution[el]} 
              onChange={this.onChange} /&gt;    
              )
        }
        &lt;select
          name="risk"
          onChange={this.onChange}
          value={this.state.risk}
        &gt;
          &lt;option value="" disabled&gt;risk&lt;/option&gt;
          &lt;option value="safe"&gt;safe&lt;/option&gt;
          &lt;option value="normal"&gt;normal&lt;/option&gt;
          &lt;option value="risk"&gt;risk&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;&lt;input name="default" type="checkbox" value={this.state.default} onChange={this.onChange} /&gt; Set as default lineup&lt;/label&gt;
      &lt;/div&gt;
    )
  }
}

export default MatchForm
</code></pre>