React Events - React Tutorial

Similar to HTML DOM events, React allows handling user interactions through various events like click, change, and mouseover.

Adding Events in React

In React, event names use camelCase syntax, unlike standard HTML. Event handlers in React are written inside curly braces.

HTML:

<button onclick="triggerAction()">Click Me!</button>

JavaScript
​x
 
<button onclick="triggerAction()">Click Me!</button>

React:

<button onClick={triggerAction}>Click Me!</button>

JavaScript
 
<button onClick={triggerAction}>Click Me!</button>

Defining Event Handlers

Here’s how to define an event handler within a component:

function ActionButton() {
  const triggerAction = () => {
    alert("Action Triggered!");
  };

  return (
    <button onClick={triggerAction}>Click Me!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ActionButton />);

JavaScript
 
function ActionButton() {  const triggerAction = () => {    alert("Action Triggered!");  };​  return (    <button onClick={triggerAction}>Click Me!</button>  );}​const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<ActionButton />);

Passing Arguments to Event Handlers

To pass arguments to an event handler, use an arrow function.

Passing the string “Success!” as an argument to the triggerAction function:

function ActionButton() {
  const triggerAction = (message) => {
    alert(message);
  };

  return (
    <button onClick={() => triggerAction("Success!")}>Click Me!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ActionButton />);

JavaScript
 
function ActionButton() {  const triggerAction = (message) => {    alert(message);  };​  return (    <button onClick={() => triggerAction("Success!")}>Click Me!</button>  );}​const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<ActionButton />);

React Event Object

Event handlers also have access to the event object that triggered the action. This is useful for handling more complex events.

Using an arrow function to manually pass the event object:

function ActionButton() {
  const triggerAction = (message, event) => {
    alert(event.type);
    // 'event' represents the React event that triggered the function, in this case the 'click' event.
  };

  return (
    <button onClick={(event) => triggerAction("Success!", event)}>Click Me!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ActionButton />);

JavaScript
 
function ActionButton() {  const triggerAction = (message, event) => {    alert(event.type);    // 'event' represents the React event that triggered the function, in this case the 'click' event.  };​  return (    <button onClick={(event) => triggerAction("Success!", event)}>Click Me!</button>  );}​const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<ActionButton />);