react passing function as props code example
Example 1: 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>)
}
}
Example 2: pass params react js
App.js -> ColorPicker (Components/ColorPicker.js)
import ColorPicker from './Component/ColorPicker';
class App extends Component {
constructor(props) {
super(props);
this.state = {
color: 'red',
};
}
render() {
return (
<div className="col">
<ColorPicker color={ this.state.color } />
</div>
)
}
}export default App;
import React, { PureComponent } from 'react';
class ColorPicker extends PureComponent {
constructor(props) {
super(props);
this.state = {
colors: ['red', 'green', 'blue', 'yellow', 'purple'],
};
}
render() {
var elementColors = this.state.colors.map((c, index) => {
return <span key={ index }
className={ this.props.color === c ? 'active squad ml-10' : 'squad ml-10'}
}
>
</span>
});
}
export default ColorPicker;
ColorPicker (Components/ColorPicker.js) -> App.js
import React, { PureComponent } from 'react';
class ColorPicker extends PureComponent {
constructor(props) {
super(props);
this.state = {
colors: ['red', 'green', 'blue', 'yellow', 'purple'],
};
}
setActiveColor = (c) => {
this.props.onReceiverColor(c);
}
render() {
var elementColors = this.state.colors.map((c, index) => {
return <span key={ index }
onClick={ () => this.setActiveColor(c) }
>
</span>
});
}
export default ColorPicker;
import React, { Component } from 'react';
import ColorPicker from './Component/ColorPicker';
class App extends Component {
onSetColor(c) {
alert(c);
}
render() {
return (
<ColorPicker onReceiverColor={ this.onSetColor } />
);
}
}export default App;