React Events

React Events: Handling User Actions Cleanly

React events connect user interactions—such as button clicks, text input, and form submissions—to JavaScript handler functions. Unlike plain HTML attributes written in lowercase (onclick="save()"), React attaches event handlers using camelCase props (onClick={save}) that receive a function reference.

Passing Handler Functions and Arguments

Attach a function reference directly when no extra arguments are needed. When you must pass an item ID or extra context to a handler, wrap the call inside an arrow function so it runs on click rather than during render.

import { useState } from 'react';

export function TagManager() {
  const [tags, setTags] = useState(['react', 'hooks', 'vite']);

  function handleRemove(tagToRemove) {
    setTags((prev) => prev.filter((tag) => tag !== tagToRemove));
  }

  return (
    <ul>
      {tags.map((tag) => (
        <li key={tag}>
          {tag}{' '}
          <button type="button" onClick={() => handleRemove(tag)}>
            Remove
          </button>
        </li>
      ))}
    </ul>
  );
}

How SyntheticEvent Works

React wraps native browser events in a cross-browser SyntheticEvent object. It gives you standard methods like event.preventDefault() to stop form page reloads and event.stopPropagation() to stop bubbling to parent elements, with identical behavior across Chrome, Safari, and Firefox.

function SearchBar({ onSearch }) {
  function handleSubmit(event) {
    event.preventDefault();
    const query = event.currentTarget.elements.query.value.trim();
    if (query) onSearch(query);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="query" type="search" placeholder="Search docs..." />
      <button type="submit">Search</button>
    </form>
  );
}

Common Event Handling Mistakes

• Calling the Handler During Render: Writing onClick={handleDelete(id)} invokes handleDelete immediately when the component renders, not when the user clicks. Use onClick={() => handleDelete(id)}.
• Forgetting event.preventDefault(): Submitting a <form> without calling preventDefault() reloads the entire browser tab and wipes React state.

Frequently Asked Questions

What is the difference between event.target and event.currentTarget?

event.target is the deepest element that triggered the event (like an icon inside a button). event.currentTarget is always the element where your handler is attached.

Can I pass event handlers to custom components?

Yes. Accept callback props like onSave or onClick in your custom component and forward them to the underlying <button> or <form>.

Do I need to manually remove JSX event listeners?

No. React manages delegation at the root container and automatically cleans up JSX event handlers when components unmount.