React wraps native browser events in a cross-browser object called a SyntheticEvent and uses a single listener at the root of the app to dispatch events to your handlers (event delegation). You just attach handlers as props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) and take a function, not a string (onClick={handleClick}, not onClick="handleClick()").e.preventDefault(), e.stopPropagation(), e.target.Don't call the function while rendering — wrap it so it runs on the event, not immediately:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
The second line calls remove(id) while building the JSX (every render), which is almost never what you want.
For forms, prefer onSubmit on the <form> (with preventDefault) over onClick on the button, so the Enter key works too.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate