title: Passing a function with parameters through props on reactjs
body: <p>I have a function that comes from a parent all the way down to a the child of a child in a component hierarchy. Normally this wouldn't be too much of a problem, but I need to receive a parameter from the child.
  I am currently getting this error message: </p>
  
  <pre><code>Uncaught (in promise) TypeError: this.props.myFunction is not a function.
  </code></pre>
  
  <p>Here is an example code to what I a doing:</p>
  
  <pre><code>class SomeComponent extends Component{
  
      constructor(props){
          super(props);
          //does whatever stuff        
          this.myFunction = this.myFunction.bind(this);
  
      }
  
      //(only applicable to raw and normal forms)
      myFunction(param){
          console.log('do something: ', param);
      }
  
      render(){
       return (&lt;div&gt;&lt;ChildComponent1 myFunction={()=&gt;this.myFunction()}/&gt;&lt;/div&gt;)
      }
  }
  
  class ChildComponent1{
        render(){
    return (&lt;div&gt;&lt;ChildComponent2 myFunction={()=&gt;this.props.myFunction()}/&gt;&lt;/div&gt;)
      }
  }
  
  class ChildComponent2{
        render(){
    return (&lt;Button onClick={()=&gt;this.props.myFunction(param)}&gt;SomeButton&lt;/Button&gt;)
      }
  }
  </code></pre>
  
  <p>So just to sum it up: I am passing myFunction as a prop from <code>SomeComponent</code> all the way down to <code>ChildComponent2</code>, in which I want it called whenever a button is clicked and to pass a parameters from <code>ChildComponent2</code>.</p>
  
  <p>Thanks!</p>