title: Call Parent function from route this.props.children in React
body: <p>I have below layout and in this layout Route pages are being rendered.</p>
  
  <pre><code> const Layout = () =&gt; {
       return (
           &lt;main className="fadeIn animated"&gt;
                 { this.props.children }
         &lt;/main&gt;
      )
    }
  
  return (
   &lt;React.Fragment&gt;
      &lt;Layout callFunction={ () =&gt; console.log('callFunction') }/&gt;
  
   {/*I will set the state using callFunction Function and then pass in modal*/}
  
      &lt;Modals data={this.state}/&gt;
   &lt;/React.Fragment&gt;
  )
  </code></pre>
  
  <p>The page that is being rendered inside the children using route is below</p>
  
  <pre><code>class Page extends React.Component {
      return (
                  &lt;React.Fragment&gt;
                      ROUTE PAGE IS . I would like to call callFunction from here
        &lt;button onClick={parent.callFunction}&gt;CALL&lt;/button&gt;
                  &lt;/React.Fragment&gt;
          )
  
  }
  </code></pre>
  
  <p>I would like to call callFunction function of Layout Component from Children Page in reactjs</p>