Handling Events
Respond to clicks and typing with onClick and onChange, and learn the #1 beginner gotcha: pass the handler, don't call it.
Step 1 of 3
Events the React way
In the DOM module you used addEventListener("click", ...). React gives you a tidier way: you attach the handler right in the JSX with a prop like onClick, onChange, or onSubmit.
<button onClick={handleClick}>Save</button>The biggest beginner trap lives in that one line: you pass the function, you don't call it.
onClick={handleClick}✅ — hands React the function to run when the click happens.onClick={handleClick()}❌ — the parentheses call it immediately, during render, and hand React the leftover return value. Your button appears to "fire on load" and not on click.
If you need to pass arguments, wrap it in an arrow function so it still runs later: onClick={() => remove(id)}.
Think of it this way: Think of giving someone your phone number versus calling them right now.
onClick={handleClick} hands React your number to call later. onClick={handleClick()} dials immediately and hands React a dead line.Web Standard
React event names are camelCase: onClick, onChange, onMouseEnter — not the lowercase onclick you'd write in raw HTML. Under the hood React still uses the standard DOM events; it just wires them up for you.
Learn more on MDN