title: How to handle multiple controlled inputs with react es6?
body: <p>Here's my fiddle</p>
  
  <p><a href="https://codepen.io/seunlanlege/pen/XjvgPJ?editors=0011" rel="nofollow noreferrer">https://codepen.io/seunlanlege/pen/XjvgPJ?editors=0011</a></p>
  
  <p>I have two inputs and I'm trying to use one method to handle the <code>onChange</code> event for any input field.</p>
  
  <p>I've torn the internet apart looking for a solution but came up with nothing.</p>
  
  <p>I'm using es6 please how do I go about this?</p>
  
  <pre><code>class Form extends React.Component {
    `constructor(props) {
      super(props);
      this.state = {text:{
        e:'hi',
        c:''
      }};
      this.handleSubmit = this.handleSubmit.bind(this);
    }`
  
    `handleChange(event,property) {
      const text = this.state.text;
        text[property] = event.target.value;
        this.setState({text});
    }`
  
    `handleSubmit(event) {
      alert('Text field value is: ' + this.state.text.e);
    }`
  
    `render() {
      return (
        &lt;div&gt;
          &lt;div&gt;{this.state.text.e}&lt;/div&gt;
          &lt;input type="text"
            placeholder="Hello!"
            value={this.state.text.e}
            onChange={this.handleChange.bind(this)} /&gt;
          &lt;input type="text"
            placeholder="Hello!"
            value={this.state.text.c}
            onChange={this.handleChange.bind(this)} /&gt;
          &lt;button onClick={this.handleSubmit}&gt;
            Submit
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }`
  
  ReactDOM.render(
    `&lt;Form /&gt;`,
    document.getElementById('root')
  );
  </code></pre>