Cant set default empty array to react-hook-form fieldarray

Viewed 25

I want to set an empty array as default value of one of my fields, which is handled by react-hook-form fieldarray, in order not to have any fields at first and by clicking a button, append() function will be called to create one. But the issue is that when I set empty array(to avoid creating field initially) as default value of my field (e.g: products: [], I get type error in fieldarray name. This is the error:

fieldArray.d.ts(6, 5): The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<{ product: { title: string; amount: string; unitPrice: string; discountPercent: string; discountPrice: number; finalPrice: number; }[]; numbers: {}[]; emails: never[]; socials: {}[]; name: string; companyName: string; ... 11 more ...; totalProdNum: number; }, "product" | ... 1 more ... | "socials"...'

here is my useForm defaultvalues(other stuff are cut to be read more easily):

defaultValues: {
  numbers: [],
  emails: [],
  socials: [],
}

and these are their relative fieldarrays:

    fields: numberFields,
    remove: removeNumber,
    append: appendNumber,
  } = useFieldArray({
    control,
    name: "numbers",
  });

  const {
    fields: emailFields,
    remove: removeEmail,
    append: appendEmail,
  } = useFieldArray({
    control,
    name: "emails",
  });

  const {
    fields: socialFields,
    remove: removeSocial,
    append: appendSocial,
  } = useFieldArray({
    control,
    name: "socials",
  });```


I get the errors from the useFieldArray name.

how can I fix this issue?

0 Answers
Related