title: Different handleChange() functions for every single element in component? (React
body: <p>I would like to know whether this is good practice or whether I should rather design this app differently. I am particulary concerned with the two 'handleChange' functions, and am wondering whether this could be simplified somehow. Other advice is also welcome, of course.</p>
  
  <p>user-add.js:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import {createUser} from '../actions/index'
  
  class UserCreate extends Component {
  
      constructor(props, context) {
          super(props, context);
          this.state = {
              inputText: 'Helluuuu'
          }
      }
  
      handleChangeFirstName(event) {
          console.log(event.target.value);
          this.setState({
              inputTextFirstName: event.target.value
          })
      }
  
      handleChangeLastName(event) {
          console.log(event.target.value);
          this.setState({
              inputTextLastName: event.target.value
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h2&gt; Add User &lt;/h2&gt;
  
                  &lt;table className="userTable"&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;First Name:&lt;/td&gt;
                      &lt;td&gt;Last Name:&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;input type="text"
                              placeholder="Hello!"
                              value={this.state.inputTextFirstName}
                              onChange={this.handleChangeFirstName.bind(this)}/&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text"
                              placeholder="Hello!"
                              value={this.state.inputTextLastName}
                              onChange={this.handleChangeLastName.bind(this)} /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;/table&gt;
  
  
                  &lt;button onClick={() =&gt;this.props.createUser()}&gt;Submit&lt;/button&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          user: state.activeUser
      };
  }
  
  function matchDispatchToProps(dispatch){
      return bindActionCreators({createUser: createUser}, dispatch);
  }
  
  export default connect(mapStateToProps, matchDispatchToProps)(UserCreate);
  </code></pre>