TypeScript, 'onChange' is specified more than once, so this usage will be

Issue

I'm using material-ui, react-hook-form and Typescript in a react project, and when I try to add onChange in TextField VScode show me and error:

'onChange' is specified more than once, so this usage will be overwritten.ts(2783) formComponent.tsx(33, 15): This spread always overwrites this property.

formComponent.tsx :

        <TextField
          variant="standard"
          defaultValue={projectData.name}
          onChange={handleSubmit((data) => console.log(data))}
          {...register('name', { required: true })}
          error={!!errors.name}
        />

Solution

You have to put onChange after the register spread

const textField = register('name', { required: true })

return (
    <input
        className="form-control"
        type="file"
        {...textField}
        onChange={(e) => {
          textField.onChange(e);
          handleSubmit(e);
     }}
    />
)

React hook form: How to can I use onChange on React Hook Form Version 7.0

Answered By - Shaynel