React Typescript cheatsheet: form elements and onChange event types
Quick cheat sheet with all the typings used for React forms. All the form elements events are the type React.ChangeEvent<T>
, where T is the HTML Element type. Here’s an example of all the different HTML types
For <input type="text">
the event type is React.ChangeEvent<HTMLInputElement>
const Input = (): JSX.Element => {
const [inputValue, setInputValue] = useState<string>("");
return (
<input
type="text"
value={inputValue}
onChange={(
ev: React.ChangeEvent<HTMLInputElement>,
): void => setInputValue(ev.target.value)}
/>
);
};
For <textarea>
is React.ChangeEvent<HTMLTextAreaElement>
const TextArea = (): JSX.Element => {
const [textAreaValue, setTextAreaValue] = useState<string>("");
return (
<textarea
value={textAreaValue}
onChange={(
ev: React.ChangeEvent<HTMLTextAreaElement>,
): void => setTextAreaValue(ev.target.value)}
/>
);
};
The HTML5 slider is an <input type="range">
, sharing the same event as the <input type="text">
, React.ChangeEvent<HTMLInputElement>
As it’s counterpart, the value of ev.target.value
will be a string, but the majority of cases we will want to use it to get a number. For that, notice how we’re using a parseInt
to cast the string
to a number
.
const Slider = (): JSX.Element => {
const [sliderValue, setSliderValue] = useState<number>(0);
return (
<input
type="range"
min={0}
max={100}
value={sliderValue}
onChange={(
ev: React.ChangeEvent<HTMLInputElement>,
): void => {
setSliderValue(
parseInt(ev.target.value, 10),
);
}}
/>
);
};
For <select>
we use React.ChangeEvent<HTMLInputSelect>
const Select = (): JSX.Element => {
const [selectValue, setSelectValue] = useState<string>(
"optionA",
);
return (
<select
value={selectValue}
onBlur={(
ev: React.ChangeEvent<HTMLSelectElement>,
): void => setSelectValue(ev.target.value)}
>
<option value="optionA">Option A</option>
<option value="optionB">Option B</option>
<option value="optionC">Option C</option>
</select>
);
};