Deep merge of complex state in React
<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>