How to pass initial values to antd CreateButton component

Hi how can I pass initial values to antd CreateButton component

8 Replies

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•2y 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•2y ago

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

national-gold•2y ago

I want to pass initial values to create form using antd's CreateButton component @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y 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•2y ago

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

foreign-sapphire•2y 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/