React for Real

Update the State with Events

We’ve set an initial value for the state. To update it, we need to capture user interactions such as typing or clicking.

In a React component, most user interactions generate an event. An event is an object that tells you which part of the interface has been affected (event.target) and what exactly happened (event.type). An event handler is a function that React calls every time it detects an event like a click or keyboard input. React passes the event as the first argument to the event handler, so you can use the event information to decide how to update the state. To make React call an event handler, you pass the event handler as a prop to the element where you want to capture the user interaction.

In our example, ...