CODEWITHSUNDEEP
reactjsreact-hook-form
dev
dev

Reputation: 926

react hook form using useFormContext not working with array fields

I am having a use case, where I have multiple tabs, each having a different set of forms, and the save and continue buttons are common for each and every tab. So using useFormContext i am able to enable, disable the button state and on click of buttons, I am getting the formState of each tab forms. But when I use array fields, I have some default array items, when I use useForm it shows but when using useFormContext it doesn't work (Tabs/UserDetails.js)

 const { register, control, reset } = useFormContext({
    mode: "onBlur",
    reValidateMode: "onChange",
    defaultValues: {
      secondName: "",
      items: DEFAULT_ITEMS
    }
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "items"
  });

Codesandbox

Any help appreciated

Upvotes: 2

Views: 5890

Answers (1)

Maximillion Bartango
Maximillion Bartango

Reputation: 1599

You need to add a <form> element with attribute onSubmit={methods.handleSubmit(yourSubmitFn)}. This should be the first child of FormProvider and wrap all your fields.

When a button with type="submit" is clicked, the form will call this handler automatically, so you can remove that code in your footer and handle it in App.js.

Also, useFormContext doesn't accept arguments, that's what useForm is for

Upvotes: -2

Related Questions