by Sai gowtham

How to pass the event with a parameter to onClick in React

Learn, how to pass the event object with a parameter to the onClick event handler in react.

In a react component, we can pass the parameter to the onClick event handler by using an arrow function which is calling the event handler with parameter.

Example:

Welcome.js
function Welcome() {

    const checkOut = (name) => {
        alert(`Hello ${name}`);
    }

    return (
        <div>
            <button onClick={() => checkOut('Gowtham')}>Greet</button>        </div>
    )
}

export default Welcome;

But, how can we pass both the event object and parameter?

We can do it like this.

Welcome.js
function Welcome() {

    const checkOut = (e, name) => {
        e.preventDefault();
        alert(`Hello ${name}`);
    }

    return (
        <div>
            <button onClick={() => checkOut(e,'Gowtham')}>Greet</button>        </div>
    )
}

export default Welcome;

In the above code, first we passed event object then parameter value to the checkOut() function.

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