title: How to pass a prop to a child component that is a function?
body: <p>Given:</p>
  
  <p><strong>Welcome.js</strong></p>
  
  <pre><code>import React from 'react';
  import WorkPlacePage from '../../components/welcome/WorkPlacePage';
  import SkillPage from '../../components/welcome/SkillPage';
  
  class Welcome extends React.Component {
  
    constructor(props) {
      super(props);
      switch (props.match.params.welcomeId) {
        case "workplace":
          this.state = { step: 1 };
          break;
        case "skills":
          this.state = { step: 2 };
          break;
        default:
          this.state = { step: 1 };
          break;
      }
      console.log(this.state)
    }
  
    nextStep(props) {
      console.log('nextStep')
      console.log(this)
      this.setState({
        step : this.state.step + 1
      })
    }
  
    showStep(props) {
      const {history} = this.props
  
      switch (this.state.step) {
        case 1:
          return &lt;WorkPlacePage history={history}
                                nextStep={this.nextStep} /&gt;
        case 2:
          return &lt;SkillPage history={history}
                            nextStep={this.nextStep} /&gt;
        default:
          return (
            &lt;div&gt;
              &lt;h1&gt;Case: Default&lt;/h1&gt;
            &lt;/div&gt;
          );
      }
    }
  
    render() {
      var style = {
        width : (this.state.step / 4 * 100) + '%'
      }
      return (
        &lt;main&gt;
          &lt;span className="progress-step"&gt;Step {this.state.step}&lt;/span&gt;
          &lt;progress className="progress" style={style}&gt;&lt;/progress&gt;
          {this.showStep()}
        &lt;/main&gt;
      )
    }
  }
  
  
  
  export default Welcome;
  </code></pre>
  
  <p><strong>WorkPlacePage.js</strong></p>
  
  <pre><code>import React from 'react';
  import createBrowserHistory from 'history/createBrowserHistory';
  
  class WorkPlacePage extends React.Component {
  
    saveAndContinue = (e) =&gt; {
      //e.preventDefault()
      this.props.nextStep()
    }
  
    render() {
  
      const history = createBrowserHistory();
  
      return (
        &lt;div&gt;
          &lt;h1&gt;Workplace&lt;/h1&gt;
          &lt;span&gt;
          survey things
          // &lt;button onClick={() =&gt; history.push('/welcome/skills')}&gt;next page&lt;/button&gt;
          &lt;/span&gt;
  
          &lt;button onClick={() =&gt; this.saveAndContinue() }&gt;XXX page&lt;/button&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default WorkPlacePage;
  </code></pre>
  
  <p>When I click the button, I'm getting the error below for <code>this.props.nextStep()</code></p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'props' of null
  </code></pre>
  
  <p>What am I doing wrong?</p>