how can I specify the event type for radio buttons with ReactJs and typescript
I tried this but it doesn't works for radio buttons though it works for input type="text"
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
....
};
<FormControlLabel
value="radio1"
control={<Radio />}
label=" radio1"
onChange={handleChange}
/>
<FormControlLabel
value="radio2"
control={<Radio />}
label="radio2"
onChange={handleChange}
/>
Error
Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{}>, checked: boolean) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'ChangeEvent<{}>' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
Type '{}' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 329 more.ts(2322)
Thanks,
Any way I found the solution.
<HTMLInputElement> is not assignable to radio buttons, so we can do the following to skip the built error,
(event: React.ChangeEvent<Record<string, unknown>>) {
console.log(event.target.value);
}
The above code should be used if we have radio button groups.
Otherwise, for a single radio button, this should be used
(event: React.ChangeEvent<unknown>, checked: boolean) {
console.log(checked);
}