Typescript error when typing onChange event

Question

I declared my state like below

const [updatedStep, updateStepObj] = useState(
    panel === 'add'
        ? new Step()
        : {
                ...selectedStep
          }
);

and I have elements like

        <TextField
            label="Title"
            value={updatedStep.title}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                updateStepObj({ ...updatedStep, title: e.currentTarget.value })
            }
        />

I am getting Typescript error for onChange event. How can I get rid of error?

frangaliana · Accepted Answer · 2019-06-26 07:01:31Z

1

You must put the same type of data for the onChange method as that TextField is declared, so it would be like this:

<TextField
   label="Title"
   value={updatedStep.title}
   onChange={(e: React.FormEvent<HTMLInputElement>, newValue?: string) =>
       updateStepObj({ ...updatedStep, title: e.currentTarget.value })
   }
/>

Note: to forget about this mess, the best thing to do before adding your method to the event is to hover over it with the mouse and it will tell you the tipado. Then you write the same and perform the action you want.

Anyway if you want something more exact I add a demo in CodeSandbox and I'll take a look :)

answered Jun 26, 2019 at 7:01

frangaliana

8039 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Typescript error when typing onChange event

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