Chapter 8: Handling Events in React

1. How React Events Differ from Native HTML Events

While React event syntax resembles traditional HTML attributes, there are three critical syntactic and behavioral differences:

Code Demonstration: Preventing Form Navigation

function SearchForm() {
  function handleSubmit(event) {
    // Stop the browser from executing a full page refresh / GET submission
    event.preventDefault();
    console.log("Form submitted via AJAX without reloading!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Search tutorials..." />
      <button type="submit">Search</button>
    </form>
  );
}

2. The SyntheticEvent Architecture & Delegation

When an event fires, React passes a SyntheticEvent object to your handler function. This object is a cross-browser wrapper conforming to the W3C spec, guaranteeing that properties likee.key, e.clientX, and e.target behave identically across Chrome, Safari, Firefox, and Edge.

3. Passing Parameters & Arguments to Event Handlers

In real-world applications, you frequently need to pass custom IDs or row objects to an event handler (such as deleting an item from a shopping cart). There are two common approaches:

Approach A: Inline Arrow Function (Standard Practice)

function UserList({ users, onDeleteUser }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {/* We pass an anonymous arrow function that invokes onDeleteUser with the ID */}
          <button onClick={() => onDeleteUser(user.id)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

Approach B: Curried / Higher-Order Function

Alternatively, define a function that returns an event handler:

function TaskManager() {
  // Returns a closure capturing the task ID
  const handleRemove = (taskId) => (event) => {
    console.log("Removing task:", taskId);
  };

  return <button onClick={handleRemove(42)}>Remove Task #42</button>;
}

4. Event Bubbling & `e.stopPropagation()`

Events in React follow the standard DOM bubbling phase: an event triggered on a nested child bubbles upward through every parent element.

If you have a card component with an overall onClick that navigates to a details page, and a nested "Favorite" button inside it, clicking the Favorite button will also trigger the parent Card click unless you stop propagation:

function InteractiveCard({ onCardClick, onFavoriteClick }) {
  return (
    <div className="card" onClick={onCardClick}>
      <h3>Product Title</h3>
      
      <button 
        className="favorite-btn" 
        onClick={(e) => {
          // Prevent the click event from bubbling up to the outer div.card!
          e.stopPropagation();
          onFavoriteClick();
        }}
      >
        ❤️ Favorite
      </button>
    </div>
  );
}

Frequently Asked Questions (FAQ)