how to pass parameter in function written in jsx in react code example
Example 1: passing argument to function handler functional compoent javascript react
function MyComponent(props) {
function handleChange(event, data){
console.log(event.target.value);
console.log(data)
}
return <button onClick={(event) => handleChange(event, 'Some Custom Value')} value='Foo'>Click</button>
}
Example 2: 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>)
}
}