React Basics

React ES6

React Hooks

React Events

React Events

What you'll learn

  • Understand the main ideas in React Events.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React Events.

❮ Previous Next ❯

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 ().

❮ Previous Next ❯