JavaScript and React Tutorial

Day 10: Passing Arguments to Event Handler in React

Learn how to pass arguments via Arrow Function and Bind Method

Most of the time, we may need to pass arguments to our event handler. How can we do this in React? We cannot directly pass the argument to the event handler because, in that scenario, the event handler function would call automatically before you even pressed the button. We will see that below in our example. There are two 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 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 e (event object)argument representing the React event and will be passed as a second argument after the ID. In the Arrow function, we have to pass it explicitly 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 NewStudent 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 NewStudent

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>

and also change the handleClick function as well

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

Your App.js should look like this

import './App.css';
import NewStudent 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'/>
<NewStudent />
</div>
);
}
export default App;

the ID, 101 shown even before we click to Click Me button

So, without even pressing the button, React is showing us the ID in the console and we don’t want this to happen. React is calling the function before we press the button.

Add a new function, handleClickArg

Arrow Function

We are using the Arrow function to pass the argument. Edit your newStudent.js file

import React , {Component} from 'react' ;
class NewStudent 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 NewStudent

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, we just use the bind method to do the exact same thing. Try this in your code and check if you get the same result?

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

Conclusion:

The most important thing to learn something like React or Angular or any other framework in any language is to see how data is flowing. What happens when we do this and what is not happening when we do that, this way you can learn the consequences of your actions.

You can find more tutorials about programming on my YouTube channel,Tech with Saran, https://www.youtube.com/channel/UCOHJCOprtOf4caI50lJlHSQ

Photo by James Harrison on Unsplash