other-emerald
other-emerald•17mo ago

adding data from useCustom in useForm default values

    const { data } = useCustom({
        method: "get",
        url: "/advertisers/initialize",
    });

    const {
        saveButtonProps,
        refineCore: { formLoading },
        register,
        control,
        formState: { errors },
        watch,
    } = useForm({
        defaultValues: {
            name: "hi",
            secureId: data?.data?.secureId || "",
        },
    });
  return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
////
    const { data } = useCustom({
        method: "get",
        url: "/advertisers/initialize",
    });

    const {
        saveButtonProps,
        refineCore: { formLoading },
        register,
        control,
        formState: { errors },
        watch,
    } = useForm({
        defaultValues: {
            name: "hi",
            secureId: data?.data?.secureId || "",
        },
    });
  return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
////
how can i use data coming from useCustom to use it in my create form
8 Replies
kapa.ai
kapa.ai•17mo ago
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. 
const { data } = useCustom({
    method: "get",
    url: "/advertisers/initialize",
});
const { data } = useCustom({
    method: "get",
    url: "/advertisers/initialize",
});
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. 
const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
    watch,
} = useForm({
    defaultValues: {
        name: "hi",
        secureId: data?.data?.secureId || "",
    },
});
const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
    watch,
} = useForm({
    defaultValues: {
        name: "hi",
        secureId: data?.data?.secureId || "",
    },
});
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. 
return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
    //...
);
return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
    //...
);
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: ----------------------
kapa.ai
kapa.ai•17mo ago
<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emeraldOP•17mo ago
@kapa.ai the data which im getting is not filling up in the form
kapa.ai
kapa.ai•17mo ago
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: 
const { data, isLoading } = useCustom({
    method: "get",
    url: "/advertisers/initialize",
});

const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
    watch,
} = useForm({
    defaultValues: {
        name: "hi",
        secureId: data?.data?.secureId || "",
    },
});

if (isLoading) {
    return <div>Loading...</div>;
}

return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
    //...
);
const { data, isLoading } = useCustom({
    method: "get",
    url: "/advertisers/initialize",
});

const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    formState: { errors },
    watch,
} = useForm({
    defaultValues: {
        name: "hi",
        secureId: data?.data?.secureId || "",
    },
});

if (isLoading) {
    return <div>Loading...</div>;
}

return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
    //...
);
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: ----------------------
kapa.ai
kapa.ai•17mo ago
<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald
other-emeraldOP•17mo ago
                 <TextField
                    {...register("secureId", {
                        required: "This field is required",
                    })}
                    error={!!(errors as any)?.secureId}
                    helperText={(errors as any)?.secureId?.message}
                    margin="normal"
                    fullWidth
                    InputLabelProps={{ shrink: true }}
                    type="text"
                    label="SecureId"
                    name="secureId"
                    disabled
                />
                 <TextField
                    {...register("secureId", {
                        required: "This field is required",
                    })}
                    error={!!(errors as any)?.secureId}
                    helperText={(errors as any)?.secureId?.message}
                    margin="normal"
                    fullWidth
                    InputLabelProps={{ shrink: true }}
                    type="text"
                    label="SecureId"
                    name="secureId"
                    disabled
                />
i want to prefill the text field with the data im getting form useCustom @kapa.ai
kapa.ai
kapa.ai•17mo ago
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: 
<TextField
    {...register("secureId", {
        required: "This field is required",
    })}
    error={!!(errors as any)?.secureId}
    helperText={(errors as any)?.secureId?.message}
    margin="normal"
    fullWidth
    InputLabelProps={{ shrink: true }}
    type="text"
    label="SecureId"
    name="secureId"
    disabled
    defaultValue={data?.data?.secureId || ""}
/>
<TextField
    {...register("secureId", {
        required: "This field is required",
    })}
    error={!!(errors as any)?.secureId}
    helperText={(errors as any)?.secureId?.message}
    margin="normal"
    fullWidth
    InputLabelProps={{ shrink: true }}
    type="text"
    label="SecureId"
    name="secureId"
    disabled
    defaultValue={data?.data?.secureId || ""}
/>
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: ----------------------
kapa.ai
kapa.ai•17mo ago
<@852840146495340564> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?