Different handleChange() functions for every single element in component? (React
<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>