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

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

complex-tealOP•2y ago

@kapa.ai it doesnt work at all

kapa.ai•2y ago

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

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

2. Prepare your dev environment | refine

Get the dev tools you need

3. Creating your refine project | refine

Launch the refine CLI setup

kapa.ai•2y ago

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

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

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

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

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

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

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

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

2. Prepare your dev environment | refine

Get the dev tools you need

3. Creating your refine project | refine

Launch the refine CLI setup

kapa.ai•2y ago

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

complex-tealOP•2y ago

@kapa.ai how many question can i ask you ?

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

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

Change field before send to api

Did you find this page helpful?