title: React JSX Spread Attribute in cloneElement
body: <p>I am learning React and got stuck. Maybe someone can help. I have the following code:</p>
  
  <p>React-router</p>
  
  <pre><code>ReactDOM.render(
  
     &lt;Router&gt; 
         &lt;Route path="/" component={App}&gt;
             &lt;Route path="something" component={Something} /&gt;
         &lt;/Route&gt;
     &lt;/Router&gt;
  
  ,document.getElementById('react-container')
  );
  </code></pre>
  
  <p>App</p>
  
  <pre><code>var App = React.createClass({
  
  getInitialState: function() {
      return {
          status: 'ready',
          title: 'The Title'
      }
  },
  
  render: function() {
  
      var childComp = null;
  
      if(this.props.children) {
  
              /*
                  This will work 
                  childComp = React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status});
              */
  
              /*this wont*/
              childComp = React.cloneElement(this.props.children, {...this.state});
      }
  
      return (
          &lt;div&gt;
              &lt;Header title={this.state.title} /&gt;
              {childComp}
          &lt;/div&gt;
      );
  }
  });
  </code></pre>
  
  <p>Something:</p>
  
  <pre><code>var Something = React.createClass({
  render: function() {
      return (
          &lt;div&gt;
              &lt;h1&gt;Something&lt;/h1&gt;
              &lt;h2&gt;{this.props.title}&lt;/h2&gt;
              &lt;h3&gt;{this.props.status}&lt;/h3&gt;
          &lt;/div&gt;
      );
  }
  });  
  </code></pre>
  
  <p>The problem is that App can have many many states. I dont want to manually write them like so:</p>
  
  <pre><code>React.cloneElement(this.props.children, {title: this.state.title, status: this.state.status})
  </code></pre>
  
  <p>But using JSX spread attributes wont work (syntaxerror)</p>