title: React: Cant call a function inside child component
body: <p>I am trying to call a function inside child component through this.refs but i keep getting error that this function doesn't exist.</p>
  
  <pre><code>Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function
  </code></pre>
  
  <p>Parent component: </p>
  
  <pre><code>class KpisHeader extends React.Component {
  
    constructor() {
      super();
      this.onUpdate = this.onUpdate.bind(this);
    }
      render(){
          return &lt;div&gt;
              &lt;DateRange ref="dateRange" onUpdate={this.onUpdate}/&gt;
              &lt;TodayKpi ref="todayKpi" {...this.state}/&gt;
            &lt;/div&gt;;
      }
  
    onUpdate(val){
  
        this.setState({
            startDate: val.startDate,
            endDate: val.endDate
        }, function(){
          this.refs.todayKpi.loadTodaysKpi();
        });
    } 
   }
  </code></pre>
  
  <p>I want to get some data from DateRange component through function onUpdate, and then I want to trigger a function inside TodayKpi which fetches data from the server. For now it is just console.log("AAA");.</p>
  
  <p>Child component:</p>
  
  <pre><code>class TodayKpi extends React.Component {
      constructor() {
          super();
          this.loadTodaysKpi = this.loadTodaysKpi.bind(this);
      }
  
      render(){
          console.log(this.props.startDate + " "+ this.props.endDate);
          return &lt;div className="today-kpi"&gt;
  
  
            &lt;/div&gt;;
      }
      loadTodaysKpi(){
          console.log("AAAA");
      }
  }
  </code></pre>
  
  <p>How should I implement this?</p>