by Sai gowtham

How to pass arguments to event handlers in React

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.

react-passing-arguments-example

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course