title: Handling multiple onChange callbacks in a React component
body: <p>This is how I'm currently handling the scenario with two input boxes. As a separate update method for each one. Can/should this be done with a single <code>handleChange</code> method instead?</p>
  
  <p><a href="https://codepen.io/r11na/pen/bZKOpj?editors=0011" rel="nofollow">https://codepen.io/r11na/pen/bZKOpj?editors=0011</a></p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleChange1 = this.handleChange1.bind(this);
      this.handleChange2 = this.handleChange2.bind(this);
  
      this.state = {
        name1: '',
        name2: ''
      };
    };
  
    handleChange1(e) {
      this.setState({
        name1: e.target.value
      });
    };
  
    handleChange2(e) {
      this.setState({
        name2: e.target.value
      });
    };
  
    render() {
      return (
        &lt;div class="row column"&gt;
          &lt;Label name={this.state.name1}/&gt;
          &lt;Input onChange={this.handleChange1} /&gt;
          &lt;Label name={this.state.name2}/&gt;
          &lt;Input onChange={this.handleChange2} /&gt;
        &lt;/div&gt;
      );
    };
  }
  
  const Label = props =&gt; (
    &lt;p {...props}&gt;Hello: &lt;span className="label-name"&gt;{props.name}&lt;/span&gt;&lt;/p&gt;
  );
  
  const Input = props =&gt; (
    &lt;input placeholder="Enter your name" {...props} type="text" /&gt; 
  );
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'))
  </code></pre>