Event Parameters
Last updated: 2026-11-02
Event Parameters Event Parameters
An event handler receives the event object e and can read values such as target.value or key from it. When extra arguments have to be passed along, wrap the call in an arrow function — onClick={() => fn(id)} — because writing fn(id) would execute it while rendering. React 17 also stopped pooling event objects, so you can safely keep one around and read it later.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
onChange={(e) => setName(e.target.value)} // e: the event object
onClick={() => remove(id)} // Extra arguments: wrap in an arrow function
onClick={(e) => remove(id, e)} // Both the arguments and the event object⚙️ Parameters
| e (event object) | The React synthetic event object; e.target.value reads the current value of an input and e.type tells you which event fired. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Three color swatch buttons; clicking one records "Picked #xxxxxx (event type: click)" below, newest first and at most three entries — a demonstration of passing custom arguments to an event handler.💡 Key Points
💡 Tip Write () => fn(x) to pass arguments; writing fn(x) directly runs it while rendering — the most common bug when passing event arguments.
ℹ️ Info The properties you read most often are e.target.value (the current value of an input) and e.key (which key was pressed in a keyboard event).
ℹ️ Info Since React 17 event objects are no longer pooled, so you can safely store one or read it asynchronously without calling e.persist().
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I pass arguments to onClick?
A Wrap the call in an arrow function: onClick={() => remove(id)}; if you also need the event object, write onClick={(e) => remove(id, e)}.
Q Which event object properties do I use most?
A e.target (the element that fired the event, often combined with .value to read an input), e.type (the event type), e.key (the keyboard key) and e.clientX/Y (the mouse position).
Q Should I use arrow functions or bind to pass arguments?
A Modern code uses arrow functions everywhere; they are clearer to read. bind is the older approach with the same effect but worse readability, so new projects do not need it.
