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:

Uncaught (in promise) TypeError: this.props.myFunction is not a function.

Here is an example code to what I a doing:

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 (<div><ChildComponent1 myFunction={()=>this.myFunction()}/></div>)

    }

}



class ChildComponent1{

      render(){

  return (<div><ChildComponent2 myFunction={()=>this.props.myFunction()}/></div>)

    }

}



class ChildComponent2{

      render(){

  return (<Button onClick={()=>this.props.myFunction(param)}>SomeButton</Button>)

    }

}

So just to sum it up: I am passing myFunction as a prop from SomeComponent all the way down to ChildComponent2, in which I want it called whenever a button is clicked and to pass a parameters from ChildComponent2.

Thanks!