title: react how to override child function in parent,
body: <p>There is <code>PanelHeader</code> component in use by many components, it contains a refresh icon which triggers its function: <code>this.toggleReload</code>,</p>
  <p>It just reload the content, I want to pass a function from parent component and execute in it; (<code>CallMyCustomFunction</code>)</p>
  <p>panel.jsx:</p>
  <pre><code>import React from 'react';
  
      export const PanelStat = React.createContext();
      
      class Panel extends React.Component {
          constructor(props) {
              super(props);
     
              this.toggleReload = () =&gt; {
                  if (this.state.reload !== true) {
                      this.setState(state =&gt; ({
                          reload: true
                      }));
                      if (props.CallMyCustomFunction)
                          props.CallMyCustomFunction()
      
                      setTimeout(() =&gt; {
                          this.setState(state =&gt; ({
                              reload: false
                          }));
                      }, 2000);
                  }
              }
      
              this.state = {
                  reload: false,
                  toggleReload: this.toggleReload,
              }
          }
          render() {
              return (
                  &lt;PanelStat.Provider value={this.state}&gt;
                      {(!this.state.remove &amp;&amp;
                          &lt;div className={'panel panel-' + (this.props.theme ? this.props.theme : 'inverse') + ' ' + (this.state.expand ? 'panel-expand ' : ' ') + (this.state.reload ? 'panel-loading ' : ' ') + (this.props.className ? this.props.className : '')}&gt;
                              {this.props.children}
                          &lt;/div&gt;
                      )}
                  &lt;/PanelStat.Provider&gt;
              );
          }
      };
      
      class PanelHeader extends React.Component {
          render() {
              return (
                  &lt;div className=&quot;panel-heading&quot;&gt;
                      &lt;h4 className=&quot;panel-title&quot;&gt;{this.props.children}&lt;/h4&gt;
                      {(!this.props.noButton &amp;&amp;
                          &lt;PanelStat.Consumer&gt;
                              {({ toggleReload }) =&gt; (
                                  &lt;div className=&quot;panel-heading-btn&quot;&gt;
                                      
                                      &lt;button className=&quot;btn btn-xs btn-icon btn-circle btn-success&quot; onClick={toggleReload}&gt;&lt;i className=&quot;fa fa-redo&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                      
                                  &lt;/div&gt;
                              )}
                          &lt;/PanelStat.Consumer&gt;
                      )}
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>
  <p>parent component:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Panel, PanelHeader } from &quot;../../components/panel/panel&quot;;
  
  export default () =&gt; {
    return (
      &lt;div&gt;
        &lt;Panel&gt;
          &lt;PanelHeader CallMyCustomFunction={()=&gt;{alert(&quot;Call This!!&quot;)}} &gt;Anket Listesi&lt;/PanelHeader&gt;
        &lt;/Panel&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Of course it doesnt work, how can I achieve this?</p>