Handling Events

Relax. We'll talk through this in plain words — no textbook voice.

Event handling means writing code so React responds to user actions — clicks, typing, submitting, mouse movement, and more. React event names are camelCase, and you pass a function reference inside `{}`.

jsx

function MyButton() {
  function handleClick() {
    alert('Button was clicked!');
  }

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

The `handleClick` function only runs when the button is clicked. React captures the browser event and calls the function you specified.

You should see

Clicking the button will bring up an alert box.

Info

Notice that you're passing a reference to the function, not calling it — it should be `handleClick`, not `handleClick()`.

Easy traps

You can't write it the HTML way, like `onClick="handleClick"`. In React, you need to pass it as a JavaScript expression: `onClick={handleClick}`.