Handling a textarea component in a NextJS app

Question

I am having an issue handling the input of a textarea component in a NextJS app.

Here is how the component looks like:

<textarea placeholder={pcHld}
          value={fldNm}
          onChange={onChangeVar}
          className="bg-cyan-300"
          rows={3} cols={20} />

The problem is on the onChange.

This is how onChangeVar looks:

  const onChangeVar = (event: FormEventHandler<HTMLTextAreaElement>):
    void => {
      console.log('onChangeVar:'+event.name)
      console.log('onChangeVar(JSOD):'+JSON.stringify(event))
  };

Here only debugging messages are printed. But the final goal is to be able to get the text contents of the textarea component and do something useful with it.

At this point I hit the error below:

Type '(event: FormEventHandler<HTMLTextAreaElement>) => void' is not assignable to type     'ChangeEventHandler<HTMLTextAreaElement>'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLTextAreaElement>' is not assignable to type     'FormEventHandler<HTMLTextAreaElement>'.
      Type 'ChangeEvent<HTMLTextAreaElement>' provides no match for the signature '(event:    FormEvent<HTMLTextAreaElement>): void'.ts(2322)
......

or:

Type '(event: ChangeEventHandler<HTMLTextAreaElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement>'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLTextAreaElement>' is not assignable to type 'ChangeEventHandler<HTMLTextAreaElement>'.
      Type 'ChangeEvent<HTMLTextAreaElement>' provides no match for the signature '(event: ChangeEvent<HTMLTextAreaElement>): void'.

I am obviously writing something wrong in the code, since there is a missmatch in the types.

But the few things I tried out failed, so what is the way I should change the code for things to work ?

Answer 1

Change this line

const onChangeVar = (event: FormEventHandler<HTMLTextAreaElement>):

To

const onChangeVar = (event: ChangeEvent<HTMLTextAreaElement>):

While ChangeEvent refers to the event object itself, FormEventHandler refers to the function.

const onChange: FormEventHandler<HTMLTextAreaElement> = (event) => {}
const onChange = (event: ChangeEvent<HTMLTextAreaElement> => {}