Passing Arguments to Event Handler in React

Most of the time, we may require to pass arguments to our event handler. How can we do this in React? We can’t straight pass the argument to the event handler for the reason that, in that scenario, the event handler function would call automatically before you even pressed the button. See the below example. There are 2 ways to pass arguments, via the Arrow function() and the Bind method.

Arrow Function

<button onClick = {(e)} => this.handleClick(id,e)>Delete</button>

id could be any state and/or props and e is the event object of the react.

Bind Method

<button onClick={this.handleClick.bind(this,id)>Delete</button>

In both cases, the  event object argument representing the React event and will be passed as a second argument after the ID. The Arrow function(), we have to pass it specific and in the bind method, arguments are automatically forwarded.

Create a new file newStudent.js in our component folder and put this code into it.

import React , {Component} from 'react' ;
class New extends Component {
//state without a constructor
state = {
id=1,
name : 'Kim',
};
//Event Handler Arrow Function
handleClick = () => {
console.log('Button Click')
};
render() {
return (
 <div>
    <h1>Hey, {this.state.name}</h1>
    <button onClick = {this.handleClick} >Click Me</button>
 </div>
)
}}
export default New

Passing an argument to the event handler

Remove this code:

 <button onClick = {this.handleClick} >Click Me</button>

and add this line:

<button onClick = {this.handleClick('101')} >Click Me</button>

change the handleClick function as well:  

handleClick = (id) => {console.log(id)};

App.js should look like this:

import './App.css';
import New from './components/newStudent';
import React from 'react';
import Student from './components/student';
import Welcome from './components/welcome';
function App() {
return (
<div className="App">
<Welcome />
<Student roll='1'/>
<New />
</div>
);
}
export default App;

So, without even pressing the button, React is showing us the ID in the console and we do not want this to happen. React is calling the function() before we press the button.

Add a new function, handleClickArg:

Arrow Function:  Arrow function to pass the argument

import React , {Component} from 'react' ;
class New extends Component {
//state without a constructor
state = {
id: 101,
name : 'Kim',
};
//Event Handler Arrow Function
handleClick = (id) => {
console.log(id)
};
handleClickArg = () => {
this.handleClick(this.state.id);
}
render() {
return (
<div>
<h1>Hey, {this.state.name}</h1>
<button onClick = {this.handleClickArg} >Click Me</button>
</div>
)}}
export default New

we created a handleClickArg function() and passed its reference to our button’s click event. As soon as you click on the button, the handleClickArg function() will trigger the handleClick function() and this will log the id of the student.

Bind Method

In the Bind method, you just use the bind method to do the exact same thing. Try this in your code and let’s check if you get the same result?

<button onClick={this.handleClick.bind(this, this.state.id)}>Click</button>