Answers for "how to pass function as prop in react component"

C
1

function component with props

import React from "react"

function Checkbox(props){
    return (
        <div>
            <input type="checkbox" />
            <label>{props.value}</label>
        </div>
    )
}

export default Checkbox
Posted by: Guest on April-13-2021
0

pass function with parameter as prop

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>)
    }
}
Posted by: Guest on September-16-2020

Code answers related to "how to pass function as prop in react component"

Code answers related to "C"

Browse Popular Code Answers by Language