title: Calling Child component function from Parent component in React.js
body: <p>I am trying to call a function in my child component from a button click event in my parent component.</p>
  
  <p><strong>Parent Component:</strong></p>
  
  <pre><code>class Parent extends Component{
      constructor(props){
          super(props);
          this.state = {
              //..
          }
      }
  
      handleSaveDialog = (handleSaveClick) =&gt; {
          this.handleSaveClick = handleSaveClick;
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;Button onClick={this.openDialog}&gt;Open Dialog&lt;/Button&gt;
                  &lt;Dialog&gt;
                      &lt;DialogTitle id="form-dialog-title"&gt;Child Dialog&lt;/DialogTitle&gt;
                      &lt;DialogContent&gt;
                          &lt;Child handleSaveData={this.handleSaveDialog}/&gt;
                      &lt;/DialogContent&gt;
                      &lt;DialogActions&gt;
                          &lt;Button onClick={this.handleSaveClick} color="primary"&gt;
                              Save
                          &lt;/Button&gt;
                      &lt;/DialogActions&gt;
                  &lt;/Dialog&gt;       
              &lt;/div&gt;  
          );
      }
  }
  </code></pre>
  
  <p>In the above code, the Parent component renders a Child component modal dialog (based on Material-UI) on click of a button. The Save button, part of the <code>Dialog</code> component in Parent, when clicked should call a save function in the <code>Child</code> component. As you can see, I have passed a callback function <code>handleSaveDialog</code> through the <code>Child</code>component props named <code>handleSaveData</code>. The save button click will call <code>handleSaveClick</code> on the child, once the Child component mounts and passes the callback to the Parent component.</p>
  
  <p><strong>Child Component:</strong></p>
  
  <pre><code>class Child extends Component{
      constructor(props){
          super(props);
          this.state = {
              //..
          }
      }
  
      componentDidMount(){
          console.log('mount');
          this.props.handleSaveData( () =&gt; this.handleSaveClick());
      }
  
      handleSaveClick = () =&gt; {
          console.log('save clicked');
      }
  
      render(){
          return(
              &lt;div&gt;
                  //..
              &lt;/div&gt;      
  
          );
      }
  }
  </code></pre>
  
  <p>In the above code, I am using the accessing the callback function passed by the <code>Parent</code> component props and binding it to the <code>Child</code> component's save fucntion <code>handleSaveClick</code>.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>When I click the Open Dialog button in Parent, for the first time, the <code>Dialog</code> mounts the Child component. However, the click on <code>Save</code> button does not work (no error). After, closing the dialog, when I reopen the Dialog and click on Save, the <code>handleSaveClick</code> in the Child dialog is triggered and a message is logged in the browser console. Any idea why this works on the second time and not the first time?
  Remember, the Child Component is mounted/loaded only when I click the Open Dialog on the Parent component.</p>
  
  <p><strong><em>References:</em></strong></p>
  
  <p><a href="https://material-ui.com/components/dialogs/#form-dialogs" rel="nofollow noreferrer">https://material-ui.com/components/dialogs/#form-dialogs</a></p>
  
  <p><a href="https://stackoverflow.com/questions/37949981/call-child-method-from-parent/45582558#45582558">Call child method from parent</a></p>
  
  <p><a href="https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-390556015" rel="nofollow noreferrer">https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-390556015</a></p>