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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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 - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course