title: How should I be recreating a stateful child component in a parent's render method?
body: <p><a href="https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-shouldnt-go-in-state" rel="nofollow noreferrer">Facebook says</a> that I should not keep a React component in its parent's state. Instead I should be recreating the child in render method each time it is run.</p>
  <blockquote>
  <p><strong>What Shouldn't Go in State?</strong></p>
  <p><strong>React components:</strong> Build them in render() based on underlying props and
  state.</p>
  </blockquote>
  <p>Now my question is: How can I do that? Is it even possible? Isn't the state lost if I recreate a child component from scratch?</p>
  <p>The only way I can think of that this scenario will work in, is that there's only one state object and it belongs to the root component. The rest of components will only have <code>props</code> and whenever they want to update some state of theirs, they need to call some parent's handler all the way up to root component, since it's the only component with an state object! And once updated, the root will give the child components back their state as <code>props</code>. Which I don't think it is practical at all!</p>
  <p><strong>[UPDATE]</strong></p>
  <p>Here's a sample code that I find hard not to store components in the parent's state:</p>
  <p><a href="http://codepen.io/mehranziadloo/pen/XdLvgq" rel="nofollow noreferrer">http://codepen.io/mehranziadloo/pen/XdLvgq</a></p>
  <pre><code>class BlackBox extends React.Component
  {
      constructor() {
          super();
          this.state = {
              counter: 0
          };
      }
      
      increment() {
          this.setState({ counter: this.state.counter+1 });
      }
      
      render() {
          return (
              &lt;span onClick={this.increment.bind(this)} style={{
                  fontSize: '24pt',
                  border: '1px solid black',
                  margin: 10,
                  padding: 10,
              }}&gt;
                  {this.state.counter}
              &lt;/span&gt;
          );
      }
  }
  
  class RedBox extends React.Component
  {
      constructor() {
          super();
          this.state = {
              counter: 0
          };
      }
      
      increment() {
          this.setState({ counter: this.state.counter+1 });
      }
      
      render() {
          return (
              &lt;span onClick={this.increment.bind(this)} style={{
                  fontSize: '24pt',
                  border: '1px solid red',
                  margin: 10,
                  padding: 10,
              }}&gt;
                  {this.state.counter}
              &lt;/span&gt;
          );
      }
  }
  
  class Parent extends React.Component
  {
      constructor() {
          super();
          this.state = {
              childCmps: [],
          };
      }
  
      addBlackBox() {
          let newState = this.state.childCmps.slice();
          newState.push(&lt;BlackBox key={newState.length} /&gt;);
          this.setState({
              childCmps: newState
          });
      }
  
      addRedBox() {
          let newState = this.state.childCmps.slice();
          newState.push(&lt;RedBox key={newState.length} /&gt;);
          this.setState({
              childCmps: newState
          });
      }
  
      render() {
          let me = this;
  
          return (
              &lt;div&gt;
                  &lt;button onClick={this.addBlackBox.bind(this)}&gt;Add Black Box&lt;/button&gt; 
                  &lt;button onClick={this.addRedBox.bind(this)}&gt;Add Red Box&lt;/button&gt;
                  &lt;br /&gt;&lt;br /&gt;
                  {this.state.childCmps}
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(
      &lt;Parent /&gt;,
      document.getElementById('root')
  );
  </code></pre>