How To Pass Event And Parameter OnClick In React

Passing event and parameter onClick in React will help you to manipulate and work with DOM elements. To do that you need to know about onClick attribute or some other function. So how to do it? Let’s go into detail.

Pass event and parameter onClick in React

Understanding onClick

React provided the onClick attribute that can help you catch if the user clicks on your elements. Then you can execute your logic code if the onClick is triggered.

Syntax:

onClick={{callback(e)}}

Parameters:

• callback: The callback would be triggered when an element is clicked.
• e: Stands for ‘event’ containing all properties related to an event that happens to an element.

The ‘event’ parameter in onClick has all properties that look like this:

Example:

import './App.css';

function App() {
    return (
        <div className="App">
            <h1 >Hello From Learn Share IT</h1>
            <button onClick={(e) => { console.log(e); }}>Click Me</button>
        </div>
    );
}

export default App;

Output:

With this example, we can access our element through the target property, which is the button element.

Example for onClick

Example:

import { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);
  
    return (
        <div className="App">
            <h1>Hello From Learn Share IT</h1>
            <button 
                onClick={(e) => {
                    setCount(count + 1);
                    console.log(count);
            	}}
            >Click Me</button>
        </div>
    );
}

export default App;

Output:

Before click:

After click:

Or you can also pass in an already function.

Example:

import { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);
    const handleClick = (e) => {
        (e) => {
            setCount(count + 1);
            console.log(count);
        };
    };
    
    return (
        <div className="App">
            <h1>Hello From Learn Share IT</h1>
            <button onClick={handleClick}>Click Me</button>
            <h1>{count}</h1>
        </div>
    );
}

export default App;

Here I make a logic that every time I click a button, the count state value will be plus with 1.

Summary

In this article, I’ve shown you how to pass event and parameter onClick in React. You can pass in an arrow function without a name into onClick directly or can create a function outside and then pass it in. Thanks for reading!

Maybe you are interested:

• Submit a form using the Enter key in React.js
• Understanding the exhaustive-deps Eslint rule in React
• Using the map() method with index in React

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm