Error when registering inputs with React Hook Form with defaultValues

Question

I am new to using React and React Hook Form, and am running into a typescript error (TS:2345) when I try to register a new input after assigning defaultValues for the form. I am creating a resume generator that watches for changes in the inputs and dynamically updates it on the resume.

The default value I am using is formatted like this:

export const defaultData = {
    name: 'John Doe',
    email: '[email protected]',
    number: '416-123-4567',
    address: 'California'
}

In my App component, I add my defaultValues with useForm()

function App(): JSX.Element {
  const { register, setValue, watch } = useForm({ defaultValues: defaultData });

Then, when I go on to register the inputs, i get the error:

Argument of type 'string' is not assignable to parameter of type '"number" | "name" | "email" | "address" (TS:2345)'

inputs={section.inputs.map((iField) => {
          const field = iField.field; //field is the name of the input property
          return (
            <div key={iField.id} className="inputField">
              <label>{iField.title}</label>
              <input
                {...register(field)}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  setValue(field, e.target.value);
                }}
              ></input>
            </div>
          );
        })}

Any idea why I am getting this error? The properties in defaultData are all strings

riv0manana · Accepted Answer · 2024-05-31 20:08:36Z

0

The register function accept only string. Your field might be a string but with only specific list of strings "number" | "name" | "email" | "address". So you have compatibility issue as string can be anything else...

You might want to change {...register(field)} to {...register(field as string)}

answered May 31, 2024 at 20:08

riv0manana

1265 bronze badges

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

Collectives™ on Stack Overflow

Error when registering inputs with React Hook Form with defaultValues

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