title: ReactJS pass function as a property to onStatusChange
body: <p>Why the <code>&quot;this&quot;</code> in <code>this.props.onStatusChange(taskstatus)</code>; is <code>TypeError: this.props.onStatusChange is not a function</code>? How to bind it correctly?</p>
  <p>Dashboard component</p>
  <pre><code>export default function Dashboard() {
  
    const handleStatusChange = (params) =&gt; {
      if(params==='success')
        setIsLoading(false)
      else
        setIsLoading(true)
    };
  
    const uuid = &quot;&quot;;
  
   &lt;TabPanel value={value} index={0}&gt;
                    &lt;Guest onStausChange={this.handleStatusChange.bind(this)} uuid={uuid}/&gt;
                  &lt;/TabPanel&gt;
  </code></pre>
  <p>Guest component:</p>
  <pre><code>class Guest extends React.Component {
  
   loadData = async (uuid) =&gt; {
      const taskstatus = await this.apiClient.checkStatus(uuid);
      console.log(taskstatus);
      this.props.onStatusChange(taskstatus);
      if (taskstatus === 'success') {
        clearInterval(this.intervalId);
  
        //Inform parent component about status change 
        //Pass all required details from Guest to parent component here
        this.setState({ finished: true });
        this.props.onStatusChange(taskstatus);
  
      }
    }
  </code></pre>