I'm trying to convert this handler function on a MaterialUI Select element:
const handleQueryChange = (event) => {
if (event.target.name === "amount_select") {
setQuery({ ...query, ...{ total: event.target.value } });
console.log("change amount");
}
if (event.target.name === "currency_select") {
setQuery({ ...query, ...{ currency: event.target.value } });
console.log("change currency");
}
};
into Typescript. The query interface is:
interface IQuery {
currency: string,
total: number,
}
My current efforts in Typescript:
const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setQuery({
...query,
...{ [event.target.name]: [event.target.value] },
});
console.log(query);
};
And lastly, my error message:
Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type 'ChangeEvent<HTMLInputElement>'
From the other questions around this topic such as this, I think the issue is with the object spread syntax in setQuery but I can't quite see how to fix it without rewriting the cases individually, which I don't want to do as I want to introduce further query options later on.
Any ideas on what the issue is and how I can preserve the generic format in the TS example?