Apr 12, 2023 Author - Sai gowtham

How to pass arguments to event handlers in React

react1min read

In this tutorial, we are going to learn about how to pass arguments to event handler functions example onClick event.

In react we normally add event handlers to the element like this.

<button onClick={this.handleIncrement}>Increment</button>

Let’s see a counter example.

class Counter extends Component{
   state= {count:0}

  handleIncrement = ()=>{      this.setState({count:this.state.count+1});  }  render(){
     return(
         <div>
            <h1>{this.state.count}</h1>
            <button onClick={this.handleIncrement}>Increment</button>         </div>
     )
  }
}

Here we created a counter with Increment button when we click on a button the count value is incrementing by 1.

Passing arguments

Now we are going to pass arguments to our handleIncrement method so that we can increment the count value by a different number.

class Counter extends Component{
   state= {count:0}

  handleIncrement = (step)=>{      this.setState({count:this.state.count+step});  }
  render(){
     return(
         <div>
            <h1>{this.state.count}</h1>
            <button onClick={()=>this.handleIncrement(3)}>                     Increment by 3</button>            <button onClick={()=>this.handleIncrement(4)}>                     Increment by 4</button>            <button onClick={()=>this.handleIncrement(5)}>                    Increment by 5</button>         </div>
     )
  }
}

In the above code, we passed arrow function to the onClick event listener which is calling our handleIncrement method with arguments so that now we have a reusable handleIncrement method.