Events

React handles events using camelCase names attached directly to JSX elements: onClick, onChange, onSubmit, onKeyDown. You pass an event handler — a function — as the value.

The handler can be defined inline or as a named function above the return statement. Named functions are easier to read when the logic gets complex. Inline arrow functions are fine for simple one-liners.

React passes the browser's native event object to your handler automatically. You access it as the first argument — by convention named e or event. This is the same event object you'd get in vanilla JavaScript.

A common mistake: calling the function instead of passing it. onClick={handleClick} passes the reference. onClick={handleClick()} calls it immediately on every render. Always pass the reference, not the call.