React Event Handling: Complete Beginner’s Guide with Examples

Just like in plain JavaScript, React allows us to handle user actions such as:

Clicking a button
Typing in an input field
Submitting a form
Hovering over an element

In React, these are called events.
The difference is that React uses its own synthetic event system, which works the same across all browsers.

How Event Handling Works in React

In React, events are written in camelCase (e.g., onClick instead of onclick).
You pass a function as the event handler, not a string.
Events work in functional components (with Hooks) and class components.

Example 1: Handling Click Event

Functional Component

function ButtonClick() {
  const handleClick = () => {
    alert("Button was clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
}

When the button is clicked, handleClick runs.

Example 2: Passing Arguments to Event Handlers

function Greeting() {
  const sayHello = (name) => {
    alert(`Hello, ${name}!`);
  };

  return (
    <div>
      <button onClick={() => sayHello("Arvinder")}>Say Hello</button>
    </div>
  );
}

Use an arrow function () => when you need to pass arguments.

Example 3: Handling Input with onChange

import { useState } from "react";

function InputBox() {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

event.target.value gives the current input value.
The state updates and re-renders the UI in real time.

Example 4: Event Handling in Class Components

import React, { Component } from "react";

class ButtonClick extends Component {
  handleClick() {
    alert("Button clicked in Class Component!");
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

In class components, sometimes you need to bind this to event handlers (especially if using this.state).

Or simply use an arrow function:

Example 5: Prevent Default Behavior

In plain HTML, form submission reloads the page. In React, we use event.preventDefault().

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Form submitted without reloading!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Enter something" />
      <button type="submit">Submit</button>
    </form>
  );
}

Synthetic Events in React

React wraps native events in a SyntheticEvent object to ensure:

Cross-browser compatibility
Better performance

Example:

function ShowEvent() {
  const handleClick = (event) => {
    console.log(event.type); // "click"
  };

  return <button onClick={handleClick}>Check Event</button>;
}

Best Practices for Event Handling

Keep event handlers small and focused
Use state for dynamic UI updates
Use arrow functions to avoid binding in class components
Don’t overuse inline event handlers (for performance reasons)
Always call event.preventDefault() for forms if you don’t want page reloads

FAQ

Q1: Can I attach multiple event handlers to one element?
Yes, but you typically put all logic in one function.

Q2: Are React events the same as JavaScript events?
They are similar, but React wraps them in a SyntheticEvent for consistency.

Q3: Should I use inline event handlers?
For small apps, yes. For larger apps, define them as separate functions.