title: How to pass data from parent to child in react.js
body: <p>I have a parent component which has 1 child. I am updating my child by passing data through props. initially, it works fine but when I click on a button and update the state using setState the child gets rendered with old values by the time setState is finished. I have solved it using componentWillReceiveProps in the child but is this the right way?</p>
  
  <p>In the below code if I do setState in filterResults function it won't update the Emplist component . </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {Search} from './search-bar'
  import Emplist from './emplist'
  
  class App extends Component {
      constructor(props){
          super(props);
          this.emp=[{
              name:'pawan',
              age:12
          },
          {
              name:'manish',
              age : 11
          }]
          this.state={emp:this.emp};
          this.filterResults=this.filterResults.bind(this);
      }
  
      filterResults(val)
      {
          if(this.state)
          {
              let filt=[];
              filt.push(
                  this.emp.find(e=&gt;{
                      return e.age==val
                  })
              );
              this.setState({emp:filt});
          }
      }
  
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;Search filterResults={this.filterResults}/&gt;
                  &lt;Emplist emp={this.state.emp}/&gt;
              &lt;/div&gt;
          );
      }
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>EmpList Componet
  
  import React,{Component} from 'react'
  
  export default class Emp extends Component
  {
      constructor(props){
          super(props);
          
          this.emplist=this.props.emp.map(e=&gt;{return &lt;li&gt;{e.name}&lt;/li&gt;});
          this.next=this.emplist;
      }
  
      componentWillReceiveProps(nextProps,nextState,prevProps,prevState,nextContext,prevContext){
          // this.props.updated(this.props.empo);
          this.next=nextProps.emp[0];
          if(this.next)
              this.emplist= nextProps.emp.map(e=&gt;{return &lt;li&gt;{e.name}&lt;/li&gt;});
      }
  
      render(){
          if(!this.next)
              return &lt;div&gt;name not found&lt;/div&gt;
          else
              return (
                  &lt;div&gt;
                      &lt;br/&gt;
                      &lt;p&gt;The list is here&lt;/p&gt;
                      &lt;ul&gt;
                          {this.emplist}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              )
      }
  }</code></pre>
  </div>
  </div>
  </p>