adding data from useCustom in useForm default values
how can i use data coming from useCustom to use it in my create form
8 Replies
Hi @tarang._. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In your code, you are already using the
useCustom
hook to fetch data and then using the useForm
hook to set the default values of your form fields. The useCustom
hook fetches data from the specified URL and method, and the returned data is then used in the useForm
hook.
Here's a breakdown of what's happening:
1. You're using the useCustom
hook to send a GET request to the "/advertisers/initialize" endpoint. The data returned from this request is stored in the data
constant.
2. You're using the useForm
hook to handle your form data. In the defaultValues
property, you're setting the default value of the name
field to "hi" and the secureId
field to the secureId
property from the data returned by the useCustom
hook.
3. You're passing the formLoading
and saveButtonProps
properties to the <Create>
component. The formLoading
property is used to indicate whether the form is currently submitting data, and the saveButtonProps
property is used to handle the form submission.
So, you're already using the data from the useCustom
hook in your form. If you want to use more data from the useCustom
hook, you can add more fields to the defaultValues
property in the useForm
hook.
For more information, you can refer to the useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) and useForm (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below
adverse-sapphire•13mo ago
@kapa.ai the data which im getting is not filling up in the form
Let me check the knowledge base for you. One moment! :books:
----------------------
If the data from
useCustom
is not filling up in the form, it might be due to the asynchronous nature of the useCustom
hook. The useCustom
hook fetches data from the server, and this operation is asynchronous, which means it might take some time to complete. If you try to access the data before the operation is complete, it might not be available yet.
To solve this, you can add a loading state to your component and render the form only when the data is available. Here's an example of how you can do this:
In this code, the isLoading
variable is used to check if the useCustom
hook is still fetching data. If it is, a loading message is displayed. Once the data is available, the form is rendered with the data.
For more information, you can refer to the useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) and useForm (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below
adverse-sapphire•13mo ago
i want to prefill the text field with the data im getting form useCustom @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To prefill the
TextField
with the data you're getting from useCustom
, you can use the defaultValue
prop of the TextField
component. The defaultValue
prop sets the initial input value.
However, since you're using the register
function from useForm
to register your input, the initial value should be set in the useForm
hook's defaultValues
option, which you're already doing.
Here's your code with the defaultValue
prop:
In this code, the defaultValue
prop is set to the secureId
property from the data returned by the useCustom
hook. If the secureId
property is not available, the default value will be an empty string.
Please note that the defaultValue
prop sets the initial input value and it won't change if the data
changes. If you want the input value to update whenever the data
changes, you should use the value
prop instead.
For more information, you can refer to the useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) and useForm (https://refine.dev/docs/api-reference/core/hooks/useForm/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below