React Event Handlers
Synthetic events vs Native events.
The Synthetic Wrapper
When you click a button in React, the event object you receive in onClick is *not* a native browser DOM event.
React intercepts all native events and wraps them in a cross-browser SyntheticEvent. Because of this, TypeScript requires you to use React's specific event types, like React.MouseEvent.
The Mismatch Error
If you try to type a React click handler as e: MouseEvent (the native DOM type), TypeScript will yell at you. The props expect React.MouseEvent<HTMLButtonElement>.
This distinction is crucial when you are mixing vanilla DOM event listeners with React event handlers.
Syntax
tsx
import React from "react";
// ❌ Wrong: Native DOM Event
function handleClick(e: MouseEvent) { }
// ✅ Right: React Synthetic Event + Element Generic
function handleClick(e: React.MouseEvent<HTMLButtonElement>) { }
export function Button() {
return <button onClick={handleClick}>Click Me</button>
}
Try it
Observe the difference between typing a native browser event listener and typing a React component's event handler.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- React uses Synthetic Events, not Native DOM events.
- Type click events as
React.MouseEvent<HTMLElement>. - Type form submissions as
React.FormEvent<HTMLFormElement>. - Inline handlers (
onClick={(e) => ...}) are auto-typed by TypeScript.
Done with this concept?
Mark it complete to track your progress. No login needed.