rare-sapphire
rare-sapphire14mo ago

How to pass initial values to antd CreateButton component

Hi how can I pass initial values to antd CreateButton component
8 Replies
kapa.ai
kapa.ai14mo ago
Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation for more information on the CreateButton component: CreateButton Documentation (https://refine.dev/docs/api-reference/antd/components/buttons/create-button) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Create | refine
uses Ant Design's component. It uses the create method from useNavigation under the hood. It can be useful to redirect the app to the create page route of resource.
kapa.ai
kapa.ai14mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire14mo ago
I want to pass initial values to create form using antd's CreateButton component @kapa.ai
kapa.ai
kapa.ai14mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai14mo ago
---------------------- The <CreateButton> component in refine is used for navigation purposes and doesn't directly handle form initial values. However, you can pass initial values to the form in the create page using the formProps property of the <AuthPage> component or the useForm hook with Ant Design's <Form> component. Here's an example of passing initial values using formProps:
const MyLoginPage = () => {
return (
<AuthPage
type="login"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demo",
},
onFinish: (formValues) =>
alert(JSON.stringify(formValues, null, 2)),
}}
/>
);
};
const MyLoginPage = () => {
return (
<AuthPage
type="login"
formProps={{
initialValues: {
email: "demo@refine.dev",
password: "demo",
},
onFinish: (formValues) =>
alert(JSON.stringify(formValues, null, 2)),
}}
/>
);
};
Source (https://refine.dev/docs/api-reference/antd/components/antd-auth-page) And here's an example of using the useForm hook with Ant Design's <Form> component:
import React from "react";
import {
Create,
Button,
Form,
Input,
Space,
Icons,
useForm,
} from "@refinedev/antd";

interface IFormValue {
name: string;
email: string;
skills: string;
}

export default function PostCreate(Props: any) {
const { formProps, saveButtonProps } = useForm<IFormValue>();

return (
<Create saveButtonProps={saveButtonProps}>
<Form size={"large"} {...formProps}>
<Input placeholder="e.g John" />
<Input placeholder="e.g john@email.com" />
</Form>
</Create>
);
}
import React from "react";
import {
Create,
Button,
Form,
Input,
Space,
Icons,
useForm,
} from "@refinedev/antd";

interface IFormValue {
name: string;
email: string;
skills: string;
}

export default function PostCreate(Props: any) {
const { formProps, saveButtonProps } = useForm<IFormValue>();

return (
<Create saveButtonProps={saveButtonProps}>
<Form size={"large"} {...formProps}>
<Input placeholder="e.g John" />
<Input placeholder="e.g john@email.com" />
</Form>
</Create>
);
}
Source (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/) In both examples, you can set the initial values for the form fields. When you navigate to the create page using the <CreateButton>, the form will have the initial values you've set. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
| refine
component from refine is an authentication page that can be used to login, register, forgot password, and update password.
How to Create Dynamic Forms in React CRUD app with Ant Design | refine
Easy way to creating dynamic forms in React CRUD apps with Ant Design
kapa.ai
kapa.ai14mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire14mo ago
Hey @ahnaf1022 createButton just redirects to create page in related resource. There is no record creation feature. Check out the useCreate hook for this. https://refine.dev/docs/api-reference/antd/components/buttons/create-button/ https://refine.dev/docs/api-reference/core/hooks/data/useCreate/