pass a function to child component react code example
Example 1: pass state to child react
class SomeParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {color: 'red'};
}
render() {
return <SomeChildComponent color={this.state.color} />;
}
}
Example 2: pass element from child to parent react
Parent:
<div className="col-sm-9">
<SelectLanguage onSelectLanguage={this.handleLanguage} />
</div>
Child:
handleLangChange = () => {
var lang = this.dropdown.value;
this.props.onSelectLanguage(lang);
}
Example 3: pass function with parameter as prop
class SomeComponent extends Component{
constructor(props){
super(props);
this.myFunction = this.myFunction.bind(this);
}
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>)
}
}