How do you handle events in React?

Direct answer

Define an event-handler function and pass that function to a JSX event prop such as onClick, rather than calling it during render.

SaveButton.jsx

export default function SaveButton() {
  function handleClick() {
    console.log("Saved");
  }

  return <button onClick={handleClick}>Save</button>;
}

React event props use names such as onClick and onChange. Event handlers are the right place for side effects caused by a specific user action.