blank-aquamarine
blank-aquamarine12mo ago

Change field before send to api

Here is my code
export default function SessionsEdit(): ReactElement | null {

// Variables

const { formProps, saveButtonProps } = useForm<ISession>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
});


const { data: dataClients } = useList<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
});

const clients: IClient[] = dataClients?.data ?? []


return (
<Create saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
}
export default function SessionsEdit(): ReactElement | null {

// Variables

const { formProps, saveButtonProps } = useForm<ISession>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
});


const { data: dataClients } = useList<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
});

const clients: IClient[] = dataClients?.data ?? []


return (
<Create saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
}
Here is my code for my create page, but i want, before sending data to the server, updating the key "clients", i want to change clients which is a string list to a list object like this clients: [{id: string}, ........] where id is the current string
17 Replies
kapa.ai
kapa.ai12mo ago
Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can modify the clients value before submitting the form by using the onFinish prop of the Form component. Here's how you can update your code:
export default function SessionsEdit(): ReactElement | null {
// Variables
const { formProps, saveButtonProps } = useForm<ISession>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
});

const { data: dataClients } = useList<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
});

const clients: IClient[] = dataClients?.data ?? []

const handleFinish = (values: any) => {
// Transform clients array
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));

// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps} onFinish={handleFinish}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
}
export default function SessionsEdit(): ReactElement | null {
// Variables
const { formProps, saveButtonProps } = useForm<ISession>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "session",
});

const { data: dataClients } = useList<IClient>({
dataProviderName: PROVIDERS.LEARNING_LAB,
resource: "clients",
});

const clients: IClient[] = dataClients?.data ?? []

const handleFinish = (values: any) => {
// Transform clients array
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));

// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form layout="vertical" {...formProps} onFinish={handleFinish}>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
}
In this code, we define a handleFinish function that transforms the clients array into the desired format and then calls the original onFinish function with the updated values. We pass this handleFinish function to the Form component using the onFinish prop. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
blank-aquamarine
blank-aquamarine12mo ago
@kapa.ai it doesnt work at all
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai12mo ago
---------------------- I apologize for the confusion. Based on the information extracts provided, I am unable to troubleshoot the issue with your code. However, I can still guide you on how to use the refine framework. To create a form with refine, you can follow these steps: 1. Set up your development environment: Prepare your dev environment (https://refine.dev/docs/tutorial/getting-started/prepare-env) 2. Create a refine project: Creating your refine project (https://refine.dev/docs/tutorial/getting-started/headless/create-project) 3. Run the development server: Running the dev server (https://refine.dev/docs/tutorial/getting-started/headless/create-project) For more information on using refine, you can refer to the official documentation (https://refine.dev/docs). If you still face issues, please provide more context or error messages, and I'll try my best to help you based on the information extracts available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
blank-aquamarine
blank-aquamarine12mo ago
@kapa.ai
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
<GenerateFormItem label="Titre" name="title" component={<Input/>} icon="ant-design:notification-outlined" required/>
<GenerateFormItem label="Description" name="description" component={<TextArea/>} icon="ant-design:align-left-outlined" required/>
<GenerateFormItem label="Auteur" name="author" component={<Input/>} icon="ant-design:user-outlined" required/>
<GenerateFormItem label="Durée" name="duration" component={<Input type="number"/>} icon="ant-design:clock-circle-outlined" required/>
<GenerateFormItem label="URL" name="url" component={<Input/>} icon="ant-design:compass-outlined" required/>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
<GenerateFormItem label="Titre" name="title" component={<Input/>} icon="ant-design:notification-outlined" required/>
<GenerateFormItem label="Description" name="description" component={<TextArea/>} icon="ant-design:align-left-outlined" required/>
<GenerateFormItem label="Auteur" name="author" component={<Input/>} icon="ant-design:user-outlined" required/>
<GenerateFormItem label="Durée" name="duration" component={<Input type="number"/>} icon="ant-design:clock-circle-outlined" required/>
<GenerateFormItem label="URL" name="url" component={<Input/>} icon="ant-design:compass-outlined" required/>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books:
blank-aquamarine
blank-aquamarine12mo ago
@kapa.ai
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
<GenerateFormItem label="Titre" name="title" component={<Input/>} icon="ant-design:notification-outlined" required/>
<GenerateFormItem label="Description" name="description" component={<TextArea/>} icon="ant-design:align-left-outlined" required/>
<GenerateFormItem label="Auteur" name="author" component={<Input/>} icon="ant-design:user-outlined" required/>
<GenerateFormItem label="Durée" name="duration" component={<Input type="number"/>} icon="ant-design:clock-circle-outlined" required/>
<GenerateFormItem label="URL" name="url" component={<Input/>} icon="ant-design:compass-outlined" required/>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
<GenerateFormItem label="Titre" name="title" component={<Input/>} icon="ant-design:notification-outlined" required/>
<GenerateFormItem label="Description" name="description" component={<TextArea/>} icon="ant-design:align-left-outlined" required/>
<GenerateFormItem label="Auteur" name="author" component={<Input/>} icon="ant-design:user-outlined" required/>
<GenerateFormItem label="Durée" name="duration" component={<Input type="number"/>} icon="ant-design:clock-circle-outlined" required/>
<GenerateFormItem label="URL" name="url" component={<Input/>} icon="ant-design:compass-outlined" required/>
<GenerateFormItem label="Clients" name="clients" icon="ant-design:login-outlined" component={
<Select
mode="tags"
allowClear
options={clients.map(client => ({label: client.name, value: client.id}))}
onChange={(value) => {
console.log(value);
}}
/>
}/>
</Form>
</Create>
)
The console.log("ok") isn't log when i click save, how is it possible ?
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai12mo ago
---------------------- Based on the provided code, you are trying to modify the form data before submitting it to the API. You have created a handleFinish function to update the clients array and then call the original onFinish function with the updated values. Here's the code snippet you provided:
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
{/* Form items */}
</Form>
</Create>
)
const handleFinish = (values: any) => {
console.log("ok");
const updatedClients = values.clients.map((clientId: string) => ({ id: clientId }));
// Update the clients key with the new array
values.clients = updatedClients;

// Call the original onFinish function with the updated values
formProps.onFinish?.(values);
}

return (
<Create saveButtonProps={saveButtonProps}>
<Form onFinish={handleFinish} layout="vertical" {...formProps}>
{/* Form items */}
</Form>
</Create>
)
This approach should work as expected, as it follows the example provided in the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api). If you are facing any issues, please provide more context or error messages, and I'll try my best to help you based on the information extracts available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useForm | refine
useForm is used to manage forms. It returns the necessary properties and methods to control the Antd Form. Also, it has been developed by using useForm imported from @refinedev/core package.
kapa.ai
kapa.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
kapa.ai
kapa.ai12mo ago
---------------------- I apologize for the confusion earlier. Based on the information extracts provided, I am unable to troubleshoot the issue with your code. However, I can still guide you on how to use the refine framework. To create a form with refine, you can follow these steps: 1. Set up your development environment: Prepare your dev environment (https://refine.dev/docs/tutorial/getting-started/prepare-env) 2. Create a refine project: Creating your refine project (https://refine.dev/docs/tutorial/getting-started/headless/create-project) 3. Run the development server: Running the dev server (https://refine.dev/docs/tutorial/getting-started/headless/create-project) For more information on using refine, you can refer to the official documentation (https://refine.dev/docs). If you still face issues, please provide more context or error messages, and I'll try my best to help you based on the information extracts available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below
blank-aquamarine
blank-aquamarine12mo ago
@kapa.ai how many question can i ask you ?
kapa.ai
kapa.ai12mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- You can ask as many questions as you need, and I'll do my best to help you based on the information extracts provided. If you have any questions related to the refine framework or any other topic covered in the extracts, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai12mo ago
<@214840332943097856> kapa.ai is still learning and improving, please let us how it did by reacting below