Type extracted form handlers
A separately declared input handler needs a precise event parameter.
React 19+ · Type Alias
ChangeEvent
React.ChangeEvent<T> types a React DOM change event for a specific element type. Use it most directly when an extracted handler needs an explicit event annotation.
How it works
React.ChangeEvent<T> gives an extracted DOM change-event handler a concrete target element type. For an input, React.ChangeEvent<HTMLInputElement> lets TypeScript understand currentTarget and its value while the handler updates component state.
Syntax
React.ChangeEvent<T>Parameters
| Name | Type | Description |
|---|---|---|
T | Element | The DOM element type associated with the change event, such as HTMLInputElement. |
Returns
A typed React change-event object; the type alias itself does not return a runtime value.
Key points
- Give an extracted handler parameter an explicit React.ChangeEvent type.
- For an input, specialize ChangeEvent with HTMLInputElement.
- Read the changed input through currentTarget.value and use it to update state.
Common mistakes
- Use React.SyntheticEvent as the broader base type when the needed event type is not represented by a more specific React event type.
Example: Typing an extracted input change handler
import { useState } from "react";
export default function Form() {
const [value, setValue] = useState("");
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
setValue(event.currentTarget.value);
}
return <input value={value} onChange={handleChange} />;
}The handler explicitly receives a change event whose current target is an HTML input.
When to use it
Access typed target properties
A handler reads the changed control's value with element-specific typing.
Connect handlers to JSX
A callback is assigned to an input's onChange prop.
Interview questions
QHow do you type an extracted onChange handler for an HTML input?
Use React.ChangeEvent<ElementType>, replacing ElementType with the element that emits the event. For an input, React.ChangeEvent<HTMLInputElement> gives the handler a typed currentTarget and value.
Follow-up: How would you type the callback without annotating its parameter? Use React.ChangeEventHandler<HTMLInputElement> as the callback type.
QWhat does the generic parameter in ChangeEvent<T> represent?
The generic identifies the target element type, so the handler can safely access properties provided by that element. In the documented input example, currentTarget.value is available through HTMLInputElement.
Follow-up: What should you do when the event is not covered by a specific listed event type? Use React.SyntheticEvent, the common base for React events.
QWhen is explicit ChangeEvent typing especially useful?
Inline handlers often receive an event type inferred from the JSX prop they are assigned to. A separately declared function generally needs an explicit event annotation when passed to that prop.
Follow-up: What alternative keeps the callback declaration itself typed? Declare it with React.ChangeEventHandler<HTMLInputElement>.
Related
React.ChangeEventHandlerReact.SyntheticEventReact.ChangeEvent<HTMLInputElement>