react-hook-form with useFieldArray defaultValues causing naming error

Viewed 15

The error I am getting is

'Argument of type 'expenses.${number}.description' is not assignable to parameter of type '"description" | "name" | "numberOfExpenses" | "expenses" | "expenses.0" | "expenses.0.description" | "expenses.0.cost" | "expenses.0.timestamp"'

According to these docs https://react-hook-form.com/api/usefieldarray, this would be the correct syntax however I am wondering if my FormValues or my defaultValues are incorrect.

This is my form type declaration

 type FormValues = {
   description: string,
   name: string,
   numberOfExpenses: number,
   expenses: [{description: string, cost: string, timestamp: string}]
 }

This is my form declaration along with the types expected

 const {
    handleSubmit,
    register,
    setValue,
    reset,
    control,
    watch,
    formState: { errors, isSubmitting, isValid },
  } = useForm<FormValues>({
    defaultValues: {
      description: 'Default Description',
      name: 'Generic Name',
      numberOfExpenses: 0,
      expenses: [{description: '', cost: '', timestamp: ''}]
    },
    resolver: zodResolver(projectSchema),
  });

This is the area of my code causing the error

  {fields.map((item, i: number) => (
    <HStack>
       <Input
          placeholder='description'
          {...register(`expenses.${i}.description` as const)}>
       </Input>
            
    </HStack>
   ))}
0 Answers
Related