title: How do I edit multiple input controlled components in React?
body: <p>I have a component that stores a contact object as state - {firstName: "John", lastName: "Doe", phone: "1234567890} I want to create a form to edit this object but if I want the inputs to hold the value of the original contact parameter, I need to make each input a controlled component. However, I don't know how to create a handleChange function that will adjust to each parameter because my state only holds {contact: {...}}. Below is what I currently have -</p>
  
  <pre><code>  getInitialState: function () {
      return ({contact: {}});
    },
    handleChange: function (event) {
      this.setState({contact: event.target.value });
    },
    render: function () {
      return (
          &lt;div&gt;
            &lt;input type="text" onChange={this.handleChange} value={this.state.contact.firstName}/&gt;
            &lt;input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/&gt;
            &lt;input type="text" onChange={this.handleChange} value={this.state.contact.lastName}/&gt;
          &lt;/div&gt;
        );
      }
  </code></pre>
  
  <p>I wish in my handleChange I can do something like</p>
  
  <pre><code>  handleChange: function (event) {
      this.setState({contact.firstName: event.target.value });
    }
  </code></pre>