how to set param in props in react js function component code example
Example 1: react native function
class Foo extends Component {
handleClick() {
console.log('Click happened');
}
render() {
return ;
}
}
Example 2: pass params react js
//pass color from parent -> child
App.js -> ColorPicker (Components/ColorPicker.js)
/// parent App.js
import ColorPicker from './Component/ColorPicker';
class App extends Component {
constructor(props) {
super(props);
this.state = {
color: 'red',
};
}
render() {
return (
)
}
}export default App;
/// child ColorPicker
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
});
}
export default ColorPicker;
// ---------------------------------------
//pass params from child -> parent
// onClick => setActiveColor -> this.props.onReceiverColor(c);
ColorPicker (Components/ColorPicker.js) -> App.js
/// child ColorPicker
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 this.setActiveColor(c) } // click into color c will pass params c to Bai11Practice.js
>
});
}
export default ColorPicker;
// Parent
import React, { Component } from 'react';
import ColorPicker from './Component/ColorPicker';
class App extends Component {
onSetColor(c) {
alert(c);
}
render() {
return (
);
}
}export default App;