How to implement RHF for multiple duplicate forms on the same page

[wkd-kapsule]

My situation is the following:

The users of my SaaS can create a product which can have multiple variants. On the creation page, the variants are displayed like in tabs. Only one is visible at a time and you can navigate through them via a corresponding tab's link. When the user creates a new variant, it is stored in an array with the others and the parent component only renders one a time by going through the array and selecting the one corresponding to the current view (the current view is kept as a state that changes when the user clicks on the corresponding tab's link).

My structure (very simplified) looks like this :

// Inside Variants.tsx

const Variants = () => {
   const [currentView, setCurrentView] = useState(0);
   const variants = [<VariantPanel />, ...];

   const methods = useForm({
      // zodProductVariant is an imported schema
      resolver: zodResolver(zodProductVariant),
   });

   const {handleSubmit} = methods;

   const saveVariant = (data) => {
      // Do something with validated data
   }

   return (
      <FormProvider {...methods}>
         <button onClick={handleSubmit(saveVariant)}>Save variant</button>
         variants[currentview]
      </FormProvider>
   );
};

export default Variants;

The important thing is that I have a unique button to save the currently displayed form. Inside each <VariantPanel/>, I use useFormContext() to register the inputs and get the errors to display. As you can guess it, everything is working fine until I have multiple variants: they all share the same data.

For example, if errors are displayed on one variant (form), all variants, even a brand new one, would also have the errors displayed. The same goes for the data registered for each input.

I don't know if it's because they are duplicates and so there inputs having the same name is causing the issue. Or if it's because they share the same <FormProvider/>, thus the same register(), handleSubmit(), ...

What would be the correct approach to solve my issue? I was thinking about putting a unique FormProvider inside each <VariantPanel/>. But then, how could the submit button in the parent component access the correct handleSubmit() to execute?

Any help would be greatly appreciated!

[harry-gocity]

Having the same issue. Same form rendered twice, elements composed differently for two viewports. Leads to duplicated ids on the page.

@bluebill1049 I noticed you closed this August 20th 2023. Is there a solution? #10808

[BrendanC23]

It seems like there's two different issues. Can you clarify your specific use-case?

1. Question from Ability to use RHF with dynamic forms. #10808 about how to call useForm() multiple times and render two forms at once

Can you just do the following?

const form1Methods = useForm();
const form2Methods = useForm();

return (
    <>
        <RenderForm methods={form1Methods} />
        <RenderForm methods={form2Methods} />
    </>
);

2. Question from this issue: How to dynamically change between multiple useForm instances and render only one form at a time.

Once a component calls useForm with resolver, defaults, etc., it makes a fixed instance of the form data. As the component re-renders, useForm is called again and will return the same form instance. As described above, you could call useForm multiple times, but it needs to be a deterministic number of times (the rule of hooks prohibits calling a hook from a loop or if statement).

This means that the easiest option is to move the useForm call into the individual variants. The parent component will render each variant and the variants then contain a single form. The save button would need to be duplicated for each variant. When switching between variants, the current one would be unmounted and the new one would mount, which would render a new form with fresh data. This means that if you want to preserve the form's data (like when switching between tabs, each of which contains a different form), you would need to save the data somewhere (such as a database, LocalStorage, or a parent component) and pass defaultValues to useForm to load the saved data.

If all of the variants use the same form schema, you could try building a solution that calls reset() when switching between variants. Then, you only have one form instance, but the data will change when each variant changes.

[harry-gocity]

Hey @BrendanC23 thanks for your quick reply - part of my issue came from a UI lib reusing name as id. Fixing this has solved my problems 👍🏻