title: Correctly update state for nested properties
body: <p>I have following data structure in a component's state. All state properties are controlled components. </p>
  
  <pre><code>  constructor(props) {
    super(props);
    this.state = {
          companyName: '',
          country: '',
          contact: {
              firstName: '',
              lastName: '',
              email: '',
              phone: ''
          }
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  </code></pre>
  
  <p>For instance, 1st level property "Company name" is defined as,</p>
  
  <pre><code>&lt;Input label="Company Name" name="companyName" id="companyName" type="text" value={this.state.companyName} onChange={this.handleChange} required/&gt;
  </code></pre>
  
  <p>and 2nd level property "firstName" is defined as,</p>
  
  <pre><code>&lt;Input label="First Name" name="firstName" id="firstName" type="text" value={this.state.contact.firstName} onChange={this.handleChange} required/&gt;
  </code></pre>
  
  <p>My current handleChange(e) method updates state but it adds 2nd level properties to the state. What is the correct way to update the state?</p>
  
  <pre><code>    handleChange(e) {
      const { name, value } = e.target;
      this.setState({
              ...this.state,
              [name]: value,
              contact: {
                ...this.state.contact,
                [name]: value,
              }
      });
    }
  </code></pre>