pass down function as prop react code example
Example 1: how to pass a value to a react funtion without immediately firing it
<button onClick={(e) => {
this.clickMe(e, someParameter)
}}>Click Me!</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;