React + Typescript error "Types of parameters 'event' and 'event' are incompatible." for MaterialUI Select event handler

Viewed 794

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?

0 Answers
Related