can i use more then one react hook form on same page?

I want to handle 2 or more register on same page using refine react hook form

5 Replies

Hi @Hazura. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use more than one React Hook Form on the same page with Refine. Refine allows you to use all the features of the React Hook Form library with the @refinedev/react-hook-form adapter. This means you can create multiple forms on the same page, each with its own useForm hook for handling form registration, validation, and submission. Here's a basic usage of the useForm hook:

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm({  
 mode: "onChange",  
 defaultValues,  
});

You can use this hook for each form on your page, providing separate control, handleSubmit, watch, and formState for each form. For more information, you can refer to the Refine documentation (https://refine.dev/docs/examples/form/react-hook-form/useForm) and the blog post (https://refine.dev/blog/react-hook-form-validation-examples#integrating-react-hook-forms) on React Hook Form validation with complete examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

conscious-sapphire•7mo ago

@kapa.ai const { refineCore: { queryResult: queryResultFederal, formLoading: formLoadingFederal }, handleSubmit: handleSumbitFederal, clearErrors: clearErrorsFederal, register: registerFederal, setValue: setValueFederal, getValues: getValuesFederal, formState: { errors: errorsFederal }, } = useForm<ITaxSetup>({ refineCoreProps: { resource: 'stateinfo/company', id: companyId, }, }); const { refineCore: { queryResult: queryResultState, formLoading: formLoadingState }, handleSubmit: handleSumbitState, clearErrors: clearErrorsState, register: registerState, setValue: setValueState, getValues: getValuesState, formState: { errors: errorsState }, } = useForm<ITaxSetup>({ refineCoreProps: { resource: 'stateinfo/company', id: companyId, }, }); this is my code on list page, but refine data provider does not fecth the data form refine core

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- From the provided code, it seems like you're trying to fetch data from the same resource (stateinfo/company) with the same id (companyId) for both forms. If you're trying to fetch different data for each form, you should use different resources or ids. However, if you're sure that the resource and id are correct, and you're still not able to fetch the data, it might be due to the configuration of your data provider. In Refine, if you have more than one data provider, you should specify the name of the data provider you want to use with the dataProviderName property. Here's how you can do it:

useForm({  
 refineCoreProps: {  
 dataProviderName: "second-data-provider",  
 },  
});

useForm({  
 refineCoreProps: {  
 dataProviderName: "second-data-provider",  
 },  
});

You can find more information about this in the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-form#dataprovidername). If you're still facing issues, it would be helpful to check the network tab in your browser's developer tools to see if the requests to your backend are being made correctly, and if any errors are being returned. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1158373774949896222> kapa.ai is still learning and improving, please let us know how it did by reacting below

judicial-coral•7mo ago

Hello @Hazura, you can use as many hooks as you want on the same page. there shouldn't be any problems