Handling Events

Events in React

React uses synthetic events that work consistently across all browsers. You attach event handlers using camelCase props like onClick, onChange, onSubmit.

<button onClick={() => setCount(count + 1)}>Click me</button>

Event Objects

Event handlers receive a synthetic event object as their first argument. This behaves like a native DOM event and has properties like target, currentTarget, and preventDefault.

Form Handling

Controlled components keep form input values in React state. This makes the React state the "single source of truth" for form values.

<input value={name} onChange={(e) => setName(e.target.value)} />

The input is now controlled: React dictates what the input shows.