title: Deep merge of complex state in React
body: <p>When I have the following initial state declared:</p>
  
  <pre><code>  getInitialState: function() {
      return {
        isValid: false,
        metaData: {
          age: 12,
          content_type: 'short_url'
        }
      };
    },
  </code></pre>
  
  <p>and I update state with <code>setState</code> like this:</p>
  
  <pre><code>...
  let newMetaData = {  age: 20 };
  ...
  this.setState({
          isValid: true,
          metaData: newMetaData
        });
  ...
  </code></pre>
  
  <p>Resulting <code>this.state.metadata</code> object has only age defined. But as far as I'm aware, <code>this.setState()</code> merges it argument to existing state. Why it's not working here, isn't this supposed to be recurrent merging?</p>
  
  <p><strong>Is there a way to merge new object properties to state object property in React/ES6?</strong></p>