How to handle form with nested component?

Hello! I need help regarding form handling with nested components. Basically my form is composed of the following: ---------------------------------------- Form --Header ---Field1 ---Field2 ---Field3 ---Field4 ---Field5 --Tabs ---Tab1(separate component) ----Field6 ----Field7 ----Field8 ----Field9 ----Field10 ---Tab2(separate component) ----Field11 ----Field12 ----Field13 ----Field14 ----Field15 ---------------------------------------- Question: How can I pass the useForm to other components? Is that the right way? I tried to put the useForm in each components but upon saving I am not be able to pass the data of field6 to 15 I only get 1 to 5 Thanks
5 Replies
Omer
Omer2y ago
Hey @Sigmund , Which form library are you using? 👀
conscious-sapphire
conscious-sapphire2y ago
Hi @Omer , Thank you for your quick response. @pankod/refine-react-hook-form
Omer
Omer2y ago
You can handle it with the FormProvider component ⚡ Doc: https://react-hook-form.com/advanced-usage/#FormProviderPerformance
Advanced Usage
Performant, flexible and extensible forms with easy-to-use validation.
conscious-sapphire
conscious-sapphire2y ago
Thanks @Omer . Let me check this documentation. Hi @Omer! Issue already fixed using FormProvider and useFormContext. //In Main Page I wrapped the <Create> component with FormProvider <FormProvider {...methods}> <Create></Create> </FormProvider> //In child Page, using useFormContext i get the register and formState export const Tab1: React.FC = () => { const t = useTranslate(); const { register, formState: { errors }, } = useFormContext(); }
Omer
Omer2y ago
Cool 🍻