Having trouble with handling input from a textarea component in a NextJS app.
This is the structure of the component:
<textarea placeholder={pcHld}
value={fldNm}
onChange={onChangeVar}
className="bg-cyan-300"
rows={3} cols={20} />
The issue lies within the onChange function.
Here's how the onChangeVar function is defined:
const onChangeVar = (event: FormEventHandler<HTMLTextAreaElement>):
void => {
console.log('onChangeVar:'+event.name)
console.log('onChangeVar(JSOD):'+JSON.stringify(event))
};
Currently, only debugging messages are being displayed. The main objective is to retrieve the text content from the textarea and utilize it accordingly.
Encountering the following error:
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'.
Seems like there's an issue with the code due to conflicting types.
Tried some solutions without success. Any suggestions on how to modify the code to resolve this problem?