title: "Don't set props of the React component" warning
body: <p>I'm getting this React.js error I'd love to know how to fix it. Is there a way to call <code>React.cloneElement</code> on <code>this</code>?</p>
  
  <blockquote>
    <p>Warning: Don't set .props.children of the React component . Instead, specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props. The element was created by Seven.</p>
  </blockquote>
  
  <p><a href="https://jsbin.com/jofusa/3/edit?js,console,output" rel="nofollow">Here's a full working example.</a></p>
  
  <p>Here's my code: </p>
  
  <pre><code>var Thead = React.createClass({
    displayName: 'Thead',
    propTypes: function () {
      return {
        children: React.propTypes.node
      }
    },
    componentWillMount: function () {
      this.childTr = containsElement('tr', this.props.children)
      this.props.children = reconcileChildren('th',
        (this.childTr) ? this.childTr.props.children : this.props.children,
        this.props.data
      )
    },
    render: function () {
      return (
        &lt;thead&gt;
          {this.childTr ? &lt;tr {...this.childTr.props}&gt;
            {this.props.children}
          &lt;/tr&gt; : &lt;tr&gt;
            {this.props.children}
          &lt;/tr&gt;}
        &lt;/thead&gt;
      )
    }
  })
  </code></pre>