Responding to events

Until now, your components have been like posters: they look nice, but nothing happens when you touch them. Real apps respond to people. You click a button and a menu opens. You type in a box and suggestions appear.

In React, you respond to the user with event handlers. These are your own functions that React calls when something happens, such as a click, a key press or a form submit. Today starts here, because every interactive feature you build this week begins with an event.

Your first event handlerCopy Anchor Link

Here is a button that does something when you click it. Click it and watch the console panel under the preview.

There are three steps:

1. Declare a function inside your component. Here it is handleClick.
2. Put your logic inside it. Here it logs a message.
3. Pass the function to the button as the onClick prop.

The name onClick is a built-in prop that React understands on HTML-like elements such as <button>. Other common ones are onChange, onSubmit, onMouseEnter, onFocus and onKeyDown. They all follow the same pattern: on plus the event name in camelCase.

By convention, event handler functions are named handle plus the event: handleClick, handleChange, handleSubmit. React doesn't require this, but it makes your code much easier to scan.

Inline handlersCopy Anchor Link

For a short handler, you can write the function right inside the JSX with an arrow function. These two buttons do the same thing:

function handleClick() {
  console.log('Clicked');
}
<button onClick={handleClick}>Named</button>

<button onClick={() => console.log('Clicked')}>Inline</button>

Use the named version when the logic is more than a line or two. Use the inline version for tiny things, or when you need to pass an argument (you'll see that below).

Handlers can read propsCopy Anchor Link

Because an event handler is declared inside your component, it can see that component's props. That lets you make one reusable button that behaves differently depending on what you pass in.

Passing handlers as propsCopy Anchor Link

Often the parent knows what should happen, while the child only knows that a click happened. In that case the parent passes a function down as a prop, and the child attaches it to its button.

For your own components, you can name these props anything. The convention is to start them with on, like onPlay or onDelete, so they read like built-in events.

Notice the second button. handleDelete needs an argument, so the parent wraps it in an arrow function: () => handleDelete('holiday.png'). This is the pattern you'll use in the Reading List to say which book was clicked.

The event objectCopy Anchor Link

React passes an event object as the first argument to every handler. By convention it's called e. It describes what happened: which element was involved, which key was pressed, and so on.

The most useful property for now is e.target, the element where the event happened. For a text input, e.target.value is the text currently in the box.

In React, onChange fires on every keystroke, not only when the input loses focus as in plain HTML. That's what makes live search boxes and form validation easy. You'll lean on this in the forms lesson.

Propagation and default behaviorCopy Anchor Link

Events in the browser bubble (also called propagate). When you click a button inside a <div>, the click fires on the button first, then on the <div>, then on its parent, all the way up. Usually that's harmless, but sometimes a parent and child both have click handlers and you only want one to run.

Call e.stopPropagation() to stop the event from going further up. Try clicking the card body, then each button, with and without the fix.

Some events also have a default behavior in the browser. The big one is submitting a <form>: by default the browser reloads the whole page. Call e.preventDefault() to stop that.

function handleSubmit(e) {
  e.preventDefault(); // stay on the page
  console.log('Form submitted');
}

<form onSubmit={handleSubmit}>
  <input />
  <button type="submit">Send</button>
</form>

These two are easy to mix up. stopPropagation() stops parent handlers from running. preventDefault() stops the browser's built-in action. They are unrelated.

<button onClick={handleSave}>Save</button>