Handling Events

React events work similarly to DOM events, but with some syntax differences.

Event Syntax

// HTML
<button onclick="handleClick()">Click</button>

// React (camelCase, function reference)
<button onClick={handleClick}>Click</button>

Common Events

The Event Object

Event handlers receive an event object with useful info:

function handleClick(event) {
  console.log(event.target);        // Element that was clicked
  console.log(event.clientX);       // Mouse X position
  event.preventDefault();           // Stop default behavior
}

Passing Arguments

Use arrow functions to pass extra data:

<button onClick={() => deleteItem(item.id)}>
  Delete
</button>

Try the interactive event demos below!