Part 7: Handling Events in React: Synthetic Events & Actions

Handling user interaction—clicks, form inputs, keyboard shortcuts—is central to building interactive web applications. React provides a standardized, cross-browser wrapper called SyntheticEvent.

1. React SyntheticEvent System

Browser vendors historically had subtle differences in how native DOM events behaved. React wraps native browser events in a SyntheticEvent instance: - Uniform cross-browser API across Chrome, Safari, Firefox, and Edge. - Event pooling and automatic delegation to the root element (#root) for optimal performance.

2. Basic Event Handlers

Event handler props use camelCase naming (onClick, onChange, onSubmit, onMouseEnter):

export default function ActionButton() {
  function handleClick(e) {
    console.log('Event Type:', e.type);
    console.log('Target Element:', e.target);
  }

  return (
    <button onClick={handleClick} className="btn-primary">
      Click Me
    </button>
  );
}

Crucial Distinction: Pass the function reference (onClick={handleClick}), do NOT invoke it directly (onClick={handleClick()}). Calling it directly executes the function during rendering!

3. Passing Arguments to Event Handlers

To pass custom arguments to an event handler, wrap the call in an arrow function:

export default function UserList() {
  const users = [
    { id: 101, name: 'Alice' },
    { id: 102, name: 'Bob' }
  ];

  const deleteUser = (userId, userName, e) => {
    e.stopPropagation(); // Stop event bubbling
    alert(`Deleting user ${userName} (ID: ${userId})`);
  };

  return (
    <ul>
      {users.map(user => (
        <li key={user.id} className="flex justify-between p-2">
          <span>{user.name}</span>
          <button onClick={(e) => deleteUser(user.id, user.name, e)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

4. Preventing Browser Defaults (e.preventDefault())

In standard HTML, submitting a <form> triggers a full browser page reload. In React Single Page Applications, you intercept this with e.preventDefault():

export default function SearchForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted without reloading page!');
  };

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

Key Takeaways

• React events are named camelCase (onClick, onSubmit) and wrapped in SyntheticEvent.
• Pass function references, do not invoke them in JSX attributes.
• Use e.preventDefault() to stop default browser behaviors like form reload.

In Part 8, we will master Conditional Rendering: ternary operators, short-circuiting, and switch patterns!