title: Reactjs - Setting State from props using setState in child component
body: <p>I'm having the following class that renders users based on a sort dropdown. Users will be listed in alphabetical order if i choose "alphabetical" and in group order when i choose "group".</p>
  
  <pre><code>render(){
      return(
          const {members, sort} = this.state
          { sort === "alphabetical" &amp;&amp; &lt;SortByAlphabet members={members} /&gt; }
          { sort === "group" &amp;&amp; &lt;SortByGroup members={members}/&gt; }
      )
  )
  </code></pre>
  
  <p>In <code>&lt;SortByAlphabet /&gt;</code> component I am setting a component state object from props.members in <code>componentWillReceiveProps()</code> function.</p>
  
  <pre><code>componentWillReceiveProps = props =&gt; {
      this.setState({ members : props.members });
  }
  </code></pre>
  
  <p>When I choose "group" sort, <code>&lt;SortByAlphabet /&gt;</code> component is unmounting and <code>&lt;SortByGroup /&gt;</code> is mounting in the DOM. Again when i switch back to "alphabetical" sort, the state variable (members) that was set previosly in <code>&lt;SortByAlphabet /&gt;</code> component becomes NULL because the component was removed from the DOM. </p>
  
  <p><code>componentWillReceiveProps</code> function is not triggering the second time when re-rendering <code>&lt;SortByAlphabet /&gt;</code> b'coz the props didn't change. But i want to update the state variable like i did it for the first time in <code>componentWillReceiveProps</code> function. </p>
  
  <p>How to do that?</p>