Event Handling

Introduction

Almost every interactive UI needs to respond to something the user does — a click, a keystroke, a form submission. In plain HTML and JavaScript, you would normally attach these behaviors with addEventListener or inline attributes like onclick. React has its own consistent way of wiring up events directly inside JSX.

In this lesson you will learn how React event handlers are named and written, the crucial difference between passing a function and calling one, how to pass extra arguments to a handler, what the synthetic event object gives you, and how to stop a form from reloading the page with event.preventDefault().

Events in React vs HTML

In HTML, event attributes are lowercase and take a string of JavaScript code, like onclick="doSomething()". In React, event props are written in camelCase — onClick, onChange, onSubmit — and you pass them an actual JavaScript function, not a string.

The camelCase naming (onClick, onChange, onMouseEnter, onKeyDown) matches how other JSX props are written, and it keeps event names consistent across every DOM element you use in React.

Passing a Function vs Calling It

One of the most common beginner mistakes is writing onClick={handleClick()} instead of onClick={handleClick}. These look similar but behave completely differently.

function Greeting() {
  function sayHello() {
    alert("Hello!");
  }

  return (
    <div>
      {/* Correct: passes the function itself */}
      <button onClick={sayHello}>Say Hello (correct)</button>

      {/* Wrong: calls the function immediately during render */}
      <button onClick={sayHello()}>Say Hello (bug)</button>
    </div>
  );
}

onClick={sayHello}    -> stores the function, runs it only when clicked
onClick={sayHello()}  -> calls sayHello immediately while rendering,
                         then passes its return value (undefined) to onClick

Passing Arguments to Handlers

Sometimes a handler needs extra information — which item was clicked, for example. Since you cannot write onClick={handleClick(id)} (that calls it immediately), you wrap the call in an inline arrow function instead. The arrow function itself is passed as the reference, and it only calls handleClick when the click actually happens.

function ProductList() {
  const products = ["Keyboard", "Mouse", "Monitor"];

  function handleRemove(name) {
    console.log("Removing:", name);
  }

  return (
    <ul>
      {products.map((name) => (
        <li key={name}>
          {name}
          <button onClick={() => handleRemove(name)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

Removing: Mouse

The Synthetic Event Object

Whenever an event fires, React automatically passes an event object into your handler as the first argument. This is called a SyntheticEvent — a wrapper React provides around the browser's native event, designed to behave consistently across all browsers. It has the same familiar properties you already know, like target, type, and key.

The most common property you will reach for is event.target, which refers to the DOM element the event happened on. For a text input, event.target.value gives you exactly what the user typed.

function NameInput() {
  function handleChange(event) {
    console.log("You typed:", event.target.value);
  }

  return (
    <input
      type="text"
      placeholder="Type your name"
      onChange={handleChange}
    />
  );
}

You typed: S
You typed: Sa
You typed: Sam

Preventing Default Behavior

Some DOM elements have built-in default behavior — clicking a submit button inside a form reloads the page, and clicking a link navigates away. In a React app you usually want to handle these actions yourself with JavaScript instead, so you call event.preventDefault() to stop the browser's default action.

function SimpleForm() {
  function handleSubmit(event) {
    event.preventDefault(); // stop the page from reloading
    console.log("Form submitted without a page reload!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Your email" />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Form submitted without a page reload!

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Event handling in React follows a consistent, predictable pattern: camelCase props, function references instead of calls, and a synthetic event object that gives you everything you need, including event.target.value and preventDefault(). Once this pattern feels natural, wiring up clicks, input changes, and submissions becomes second nature.

In this lesson, you learned how React events differ from HTML, why passing a function reference matters, how to pass arguments with an arrow function, what the synthetic event object provides, and how to prevent default browser behavior. Next, you will learn how to conditionally render UI based on your application's state.