title: React Component, validate the child's component data in paren component
body: <p>Let's say I have a reactJS component with a render function as something like this:</p>
  
  <pre><code>  render(){
      return(
          &lt;div&gt;
            &lt;OnBoardingHeader title={title} subTitle={subtitle} modalFlag={modalFlag}&gt;&lt;/OnBoardingHeader&gt;
            &lt;OnBoardingStepsHandler  displayContent={this.state.displayContent} modalFlag={modalFlag}&gt;&lt;/OnBoardingStepsHandler&gt;
            &lt;div className={modalFlag?"onBoarding-modal actions":"ui center aligned container"}&gt;
                &lt;div className="ui  left labeled icon button" onCLick={this.showPrevious}&gt;
                  Pre
                  &lt;i className="left arrow icon"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div className="ui  right labeled icon button" onClick={this.showNext}&gt;
                  Next
                  &lt;i className="right arrow icon"&gt;&lt;/i&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>On click of the Next and the Previous button,  I change the value for <code>displayContent</code>, Which says what need to be there in my content section.</p>
  
  <pre><code>displayContent is another react component. 
  </code></pre>
  
  <p>Now there is a scenario, where before changing this displayContent, I need to access the values inside my <code>displayContent</code>.</p>
  
  <p>I mean, let's say we have a form at step one, now on click <code>next</code> I want to validate this form, only then proceed to <code>step two</code>, in other sense call my next function.</p>
  
  <p>Now, this form has this own validation function which I need to call. Similarly, the other steps have there own validation function which I need to call before I move to the next step.</p>
  
  <p>The scenario is very similar to this,<a href="https://gist.github.com/jamesgpearce/53a6fc57677870f93248" rel="nofollow">https://gist.github.com/jamesgpearce/53a6fc57677870f93248</a>
  except, the control of my <code>next</code> and <code>previous</code> is with the parent. Not with the child.</p>
  
  <p>Now, My question is how do I access my child's components function inside my parent component. I am not sure if this is advisable to do.
  My restriction is, I don't want my next and previous controls with the child. </p>
  
  <p>Any suggestion?</p>