title: [React]: rendering through this.props.children always unmounts and mounts all children instead of just re-rendering
body: <p>i have created an accordion in react that has expand collapse functionality. 
  render:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div&gt;
          &lt;label className="label"&gt;
              { this.props.label }
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div style={{ display: !!this.state.expanded ? "block" : "none" }}&gt;
  { this.props.children } &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I call it in  something like: </p>
  
  <pre><code>&lt;Accordion&gt;
      &lt;MyComponent1/&gt;
      &lt;MyComponent2/&gt;
      &lt;MyComponent3/&gt;
  &lt;/Accordion&gt;
  </code></pre>
  
  <p>but everytime accordion is expanded/ collapsed, child components are mounted unmounted. because of this they lose any data/state of their own and i have to keep everything in  
  also  does not re-render when expand collapse happen.</p>
  
  <p>shouldnt child components just re-render and not unmount and mount again when collapse-expand happens. Is there a way to achieve the same. 
  i dont want  to keep state of each individual child Compoent</p>
  
  <p>@Drew Schuster: whole code-</p>
  
  <p>export class Accordion extends React.Component {</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          expanded: false
      }
  }
  
  public render(): JSX.Element {
      let className = My_String_Util.format("chevron-", this.state.expanded ? "down" : "right");
      return (
          &lt;div&gt;
              &lt;div onClick={ this._toggle }&gt;
                  &lt;label className={ className }  /&gt;
                  &lt;label className="label"&gt; { this.props.label } &lt;/label&gt;
              &lt;/div&gt;
              &lt;If condition={ this.state.expanded }&gt;
                  &lt;div style={{
                      display: !!this.state.expanded ? "block" : "none"
                  }}&gt;{ this.props.children }&lt;/div&gt;
              &lt;/If&gt;
          &lt;/div&gt;
      );
  }
  
  private _toggle = (): void =&gt; {
      this.setState({
          expanded: !this.state.expanded
      });
  }
  </code></pre>
  
  <p>}</p>
  
  <p>ParentComponent:</p>
  
  <pre><code>render(): JSX.Element {
      &lt;Accordion label="Sample Accordion2" expanded={true} &gt;
          &lt;MyChildComponent
                          sampleProp={"aa"}
                          stringParentProp={"initial string"}/&gt;
                      &lt;label&gt;"Hello World3"&lt;/label&gt;
  
                      &lt;/Accordion&gt;
  }
  </code></pre>
  
  <p>MyChildComponent:</p>
  
  <pre><code>constructor(props) {
  this.state = {
  stateString = this.props.stringParentProp
  }
  }
  render(): JSX.Element {
  &lt;div onClick={this._changeLabel}&gt;
      &lt;label&gt;this.state.stateString&lt;/label&gt;
  &lt;/div&gt;
  }
  
  private _changeLabel() {
  this.setState = {
  stateString = this.state.stateString + "x";
  }
  }
  </code></pre>
  
  <p>this should add 'x' everytime we click on childcomponent to its label. which works. but when we collapse and then expand again, label get reset to "initial string"</p>