React Events

React Events

React applications can perform dynamic actions based on user events, like clicks or keystrokes. React events are named using camelCase styling, rather than the lowercase styling native to standard HTML.

Handling Events

With JSX, you pass a reference to a function as the event handler, rather than passing a string.

function ActionButton() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

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

Notice how onClick is camelCased, and we pass the handleClick reference directly without invoking it with parenthesis ().