How fix TypeScript errors in React function that handles input changes of multiple form fields

Question

I liked the approach taught at https://www.pluralsight.com/guides/handling-multiple-inputs-with-single-onchange-handler-react but I'm having trouble converting it to TypeScript.

See the red-underline errors (such as Property 'checked' does not exist on type 'EventTarget & (HTMLTextAreaElement | HTMLInputElement)'.):

  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
    const thisField = event.target.name;
    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
    console.log(thisField, value);
    setUser({
      ...user,
      [thisField]: value,
    });
  }

What do I need to change about my types to resolve these errors?

baig · Accepted Answer · 2022-05-10 20:46:52Z

1

Use the Typescript 'as' keyword to narrow down the type of the event object.

const value = event.target.type === 'checkbox' ? (event as React.ChangeEvent<HTMLInputElement>).target.checked : event.target.value;

answered May 10, 2022 at 20:46

baig

1083 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How fix TypeScript errors in React function that handles input changes of multiple form fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related