CODEWITHSUNDEEP
javascriptreactjs
theJuls
theJuls

Reputation: 7470

Passing a function with parameters through props on reactjs

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!

Upvotes: 54

Views: 200152

Answers (3)

Majedur
Majedur

Reputation: 3242

In addition, with reatjs functional component.

export default function SomeComponent() {
  const myFunction = (param) => {
    console.log("do something: ", param);
  };
  return (
    <div>
      <ChildComponent1 yourFunction={myFunction} />
    </div>
  );
}

export function ChildComponent1({ yourFunction }) {
  return (
    <div>
      <ChildComponent2 parentFunction={yourFunction} />
    </div>
  );
}

export function ChildComponent2({ parentFunction }) {
  return <Button onClick={() => parentFunction(param)}>SomeButton</Button>;
}

Upvotes: 4

Norfeldt
Norfeldt

Reputation: 9708

An alternative and IMO more clean way to do it would be like this:

class SomeComponent extends Component{
    myFunction = param => {
        console.log('do something: ', param);
    }

    render(){
     return (
       <div>
         <ChildComponent1 onClick={this.myFunction}/>
       </div>)
    }
}

class ChildComponent1{
      render(){
        return (<div><ChildComponent2 onClick={this.props.onClick}/></div>)
      }
}

class ChildComponent2{
      render(){
        const { onClick } = this.props // destructure
        return (<Button onClick={()=>onClick(param)}>SomeButton</Button>)
      }
}

Upvotes: 19

Felix Kling
Felix Kling

Reputation: 817128

I don't see why you would get that error, but you should be doing myFunction={this.myFunction} and myFunction={this.props.myFunction}:

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>)
    }
}

Wrapping the function call inside another (arrow) function is just unnecessary and won't forward the parameter properly (since all your intermediate arrow functions do not accept a parameter).

Upvotes: 80

Related Questions