title: React reusable stateful component
body: <p>Let's say I created a component which can be turned on/off based on state.</p>
  
  <pre><code>var onOff = React.createElement(&lt;OnOff /&gt;, mountElement);
  onOff.setState({ on: false });
  </code></pre>
  
  <p>Later I'm creating a new component called Parent, which will use OnOff inside it.</p>
  
  <pre><code>render() { return &lt;div&gt;&lt;OnOff /&gt;&lt;/div&gt; }
  </code></pre>
  
  <p>Now how can I change the OnOff state? There is no way I can call setState on it. And I should not according to React doc. So I have to add initial state to OnOff's props:</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = { on: props.initialOn };
  }
  </code></pre>
  
  <p>then in Parent's render method, set the initialOn prop with its state:</p>
  
  <pre><code>render() { return &lt;div&gt;&lt;OnOff initialOn={false} /&gt;&lt;/div&gt; }
  </code></pre>
  
  <p>But it's still not working, because whenever I change Parent's state, the OnOff component inside it is not re-created with new initial state. Instead, it is only re-rendered with old state. I have a CodePen to prove it: <a href="http://codepen.io/anon/pen/QjMwjO?editors=101" rel="nofollow">http://codepen.io/anon/pen/QjMwjO?editors=101</a></p>