harsh-harlequin•17mo ago

Passing Data Between Components

What is the best way to pass some information between components? In my parent component, within the actions column, I have an edit button that redirects to edit/:id when clicked. However, I need to pass some information to the rendered component. I thought about using the meta inside useGo, but that would be incorrect, right? Since these data are not meant to compose the URL but rather to be used within my component.

17 Replies

kapa.ai•17mo ago

Hi @Silvio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To pass information between components in a Refine application, especially when dealing with actions like editing a record, you have a few options depending on your specific needs. Here are some approaches based on the provided knowledge sources: Using React Context API If the data you need to pass is not meant to be part of the URL and is required by deeply nested components, you can use the React Context API. This allows you to share data across the component tree without having to pass props down manually at every level. 1. Create a Context:

    import React, { createContext, useContext } from 'react';

    const MyContext = createContext();

    export const MyProvider = ({ children }) => {
        const value = { /* your data here */ };
        return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
    };

    export const useMyContext = () => useContext(MyContext);

    import React, { createContext, useContext } from 'react';

    const MyContext = createContext();

    export const MyProvider = ({ children }) => {
        const value = { /* your data here */ };
        return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
    };

    export const useMyContext = () => useContext(MyContext);

2. Wrap your components with the Provider:

    import { MyProvider } from './MyContext';

    const App = () => (
        <MyProvider>
            <YourComponentTree />
        </MyProvider>
    );

    import { MyProvider } from './MyContext';

    const App = () => (
        <MyProvider>
            <YourComponentTree />
        </MyProvider>
    );

3. Consume the context in your components:

    import { useMyContext } from './MyContext';

    const MyComponent = () => {
        const context = useMyContext();
        return <div>{/* use context data here */}</div>;
    };

    import { useMyContext } from './MyContext';

    const MyComponent = () => {
        const context = useMyContext();
        return <div>{/* use context data here */}</div>;
    };

For more details, you can refer to the guide on useContext and React Context API (https://refine.dev/blog/usecontext-and-react-context/#conclusion). Using meta Property in Refine If you need to pass additional parameters to the edit method but not include them in the URL, you can use the meta property. This is useful for customizing data provider methods or passing additional information. 1. Using meta in EditButton:

    const MyComponent = () => {  
        return <EditButton meta={{ additionalData: "value" }} />;  
    };

    const MyComponent = () => {  
        return <EditButton meta={{ additionalData: "value" }} />;  
    };

2. Handling meta in your data provider:

    const myDataProvider = {  
        //...  
        getOne: async ({ resource, id, meta }) => {  
            const additionalData = meta?.additionalData ?? {};  
            const url = `${apiUrl}/${resource}/${id}`;  
            const { data } = await httpClient.get(`${url}`, { headers: additionalData });  
            return { data };  
        },  
        //...  
    };

    const myDataProvider = {  
        //...  
        getOne: async ({ resource, id, meta }) => {  
            const additionalData = meta?.additionalData ?? {};  
            const url = `${apiUrl}/${resource}/${id}`;  
            const { data } = await httpClient.get(`${url}`, { headers: additionalData });  
            return { data };  
        },  
        //...  
    };

For more information, refer to the meta section of the useOne documentation (https://refine.dev/docs/data/hooks/use-one/#meta). Example with useGo and meta If you are using useGo for navigation and need to pass additional data, you can still use the meta property to pass non-URL data.

const go = useGo();

const handleEditClick = (id) => {
    go({
        to: `/edit/${id}`,
        meta: { additionalData: "value" }
    });
};

// In your component
<EditButton onClick={() => handleEditClick(record.id)} />

const go = useGo();

const handleEditClick = (id) => {
    go({
        to: `/edit/${id}`,
        meta: { additionalData: "value" }
    });
};

// In your component
<EditButton onClick={() => handleEditClick(record.id)} />

Conclusion The best approach depends on your specific use case. If the data is needed across multiple components, the React Context API is a robust solution. If the data is specific to a single action or component, using the meta property in Refine is more appropriate. For more detailed information, you can refer to the [Refine documentation on meta properties](https://refine ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

harsh-harlequinOP•17mo ago

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To retrieve the meta data in the component that will be rendered at the specified URL, you can access the meta property from the data provider methods. Here’s how you can do it: Step-by-Step Guide 1. Define the go function with meta data:

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

2. Access meta in the data provider: Ensure your data provider is set up to handle the meta property. Here’s an example of how you can modify the getOne method to log the meta data:

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta.client); // Access client meta data
            console.log(meta.ivr); // Access ivr meta data

            const url = `${apiUrl}/${resource}/${id}`;
            const { data } = await httpClient.get(url);
            return { data };
        },
        // Other methods...
    };

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta.client); // Access client meta data
            console.log(meta.ivr); // Access ivr meta data

            const url = `${apiUrl}/${resource}/${id}`;
            const { data } = await httpClient.get(url);
            return { data };
        },
        // Other methods...
    };

3. Use the meta data in your component: When you navigate to the edit page, you can use hooks like useOne or useShow to fetch the data and access the meta property.

    import { useOne } from "@refinedev/core";

    const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });
if (isLoading) {
            return <div>Loading...</div>;
        }

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

    import { useOne } from "@refinedev/core";

    const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });
if (isLoading) {
            return <div>Loading...</div>;
        }

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

Additional Information For more details on how to use the meta property, you can refer to the following sections in the Refine documentation: - Meta Concept (https://refine.dev/docs/guides-concepts/general-concepts/#meta-concept) - useShow Hook (https://refine.dev/docs/data/hooks/use-show/#meta) - Data Provider Meta Usage (https://refine.dev/docs/data/data-provider/#meta-usage) By following these steps, you can effectively pass and retrieve meta data between components in your Refine application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

harsh-harlequinOP•17mo ago

Within getOne, when I do a console.log(meta);, it does not contain the properties that I passed through useGo. @kapa.ai

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the meta properties are not being passed correctly through useGo and are not appearing in the getOne method, it might be due to how the meta data is being handled or passed. Here are a few steps to troubleshoot and ensure that the meta data is correctly passed and accessible: Step-by-Step Troubleshooting 1. Ensure Correct Usage of useGo with meta: Make sure that the meta data is correctly structured and passed in the go function.

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

2. Check Data Provider Implementation: Ensure that your data provider is correctly set up to handle the meta property. Here’s an example of how to log the meta data in the getOne method:

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta); // This should log the meta data passed from useGo
            const url = `${apiUrl}/${resource}/${id}`;
            const { data } = await httpClient.get(url);
            return { data };
        },
        // Other methods...
    };

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta); // This should log the meta data passed from useGo
            const url = `${apiUrl}/${resource}/${id}`;
            const { data } = await httpClient.get(url);
            return { data };
        },
        // Other methods...
    };

3. Verify Hook Usage in Component: Ensure that you are using the correct hook (useOne, useShow, etc.) in your component and that it is set up to pass the meta data.

    import { useOne } from "@refinedev/core";
const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });

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

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

    import { useOne } from "@refinedev/core";
const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });

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

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

Additional Considerations - Check for Issues in the Navigation Hook: Ensure that the useGo hook is correctly implemented and that the meta data is being passed as expected. If there are issues with the useGo hook, consider using an alternative method to pass the data, such as React Context or URL parameters. - Review Documentation and Examples: Refer to the meta section of the General Concepts documentation (https://refine.dev/docs/guides-concepts/general-concepts/#meta-concept) and the useOne documentation (https://refine.dev/docs/data/hooks/use-one/#meta) for more details and examples. By following these steps, you should be able to troubleshoot and ensure that the meta data is correctly passed and accessible in your component. If the issue persists, consider reviewing the implementation details or seeking further assistance from the Refine community or documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

harsh-harlequinOP•17mo ago

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It looks like the meta data is not being passed correctly to the getOne method in your data provider. This could be due to how the useGo function and the navigation are handling the meta data. Here are a few steps to ensure that the meta data is correctly passed and accessible: Step-by-Step Guide 1. Ensure Correct Usage of useGo with meta: Make sure that the meta data is correctly structured and passed in the go function.

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

    const handleEditClick = (record: { id: BaseKey; id_client: BaseKey }) => {
        go({
            to: {
                resource: "ivrDev",
                action: "edit",
                id: record.id,
                meta: {
                    client: record.id_client,
                    ivr: record.id,
                },
            },
            type: "push",
        });
    };

2. Check Data Provider Implementation: Ensure that your data provider is correctly set up to handle the meta property. Here’s an example of how to log the meta data in the getOne method:

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta); // This should log the meta data passed from useGo
            const url = `${apiUrl}/${resource}.php?token=${apiToken}`;
            const { headers, method } = meta ?? {};
            const requestMethod = (method as MethodTypes) ?? "get";

            const { data } = await httpClient**requestMethod** (url, { headers });

            return {
                data,
            };
        },
        // Other methods...
    };

    const myDataProvider = {
        getOne: async ({ resource, id, meta }) => {
            console.log(meta); // This should log the meta data passed from useGo
            const url = `${apiUrl}/${resource}.php?token=${apiToken}`;
            const { headers, method } = meta ?? {};
            const requestMethod = (method as MethodTypes) ?? "get";

            const { data } = await httpClient**requestMethod** (url, { headers });

            return {
                data,
            };
        },
        // Other methods...
    };

3. Verify Hook Usage in Component: Ensure that you are using the correct hook (useOne, useShow, etc.) in your component and that it is set up to pass the meta data.

    import { useOne } from "@refinedev/core";

    const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });

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

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

    import { useOne } from "@refinedev/core";

    const EditIvrDev = ({ id }) => {
        const { data, isLoading, meta } = useOne({
            resource: "ivrDev",
            id,
            meta: {
                client: "defaultClient", // Default value if needed
                ivr: "defaultIvr", // Default value if needed
            },
        });

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

        return (
            <div>
                <h1>Edit IVR Dev</h1>
                <p>Client ID: {meta.client}</p>
                <p>IVR ID: {meta.ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

Additional Considerations - Check for Issues in the Navigation Hook: Ensure that the useGo hook is correctly implemented and that the meta data is being passed as expected. If there are issues with the useGo hook, consider using an alternative method to pass the data, such as React Context or URL parameters. - Review Documentation and Examples: Refer to the meta section of the General Concepts documentation (https://refine.dev/docs/guides-concepts/general-concepts/#meta-concept) and the useOne documentation (https://refine.dev/docs/data/hooks/use-one/#meta) for more details and examples. By following these steps, you should be able to troubleshoot and ensure that the meta data is correctly passed and accessible in your component. If the issue persists, consider reviewing the implementation details or seeking further ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

harsh-harlequinOP•17mo ago

Can I use useNavigate? @kapa.ai

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useNavigate hook from React Router to navigate programmatically and pass state data between components. This is particularly useful when you need to pass data that is not meant to be part of the URL but rather used within the component. Using useNavigate to Pass Data 1. Import and Use useNavigate:

    import { useNavigate } from "react-router-dom";

    const MyComponent = () => {
        const navigate = useNavigate();

        const handleEditClick = (record) => {
            navigate(`/edit/${record.id}`, {
                state: {
                    client: record.id_client,
                    ivr: record.id,
                },
                replace: false, // Optional: Set to true if you want to replace the current entry in the history stack
            });
        };

        return (
            <button onClick={() => handleEditClick(record)}>Edit</button>
        );
    };

    import { useNavigate } from "react-router-dom";

    const MyComponent = () => {
        const navigate = useNavigate();

        const handleEditClick = (record) => {
            navigate(`/edit/${record.id}`, {
                state: {
                    client: record.id_client,
                    ivr: record.id,
                },
                replace: false, // Optional: Set to true if you want to replace the current entry in the history stack
            });
        };

        return (
            <button onClick={() => handleEditClick(record)}>Edit</button>
        );
    };

2. Access the Passed State in the Target Component: In the component that is rendered at the /edit/:id route, you can access the state using the useLocation hook.

    import { useLocation } from "react-router-dom";

    const EditComponent = () => {
        const location = useLocation();
        const { client, ivr } = location.state || {}; // Destructure the state

        return (
            <div>
                <h1>Edit Component</h1>
                <p>Client ID: {client}</p>
                <p>IVR ID: {ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

    import { useLocation } from "react-router-dom";

    const EditComponent = () => {
        const location = useLocation();
        const { client, ivr } = location.state || {}; // Destructure the state

        return (
            <div>
                <h1>Edit Component</h1>
                <p>Client ID: {client}</p>
                <p>IVR ID: {ivr}</p>
                {/* Render your form or other components here */}
            </div>
        );
    };

Example Here is a complete example demonstrating how to use useNavigate to pass data and access it in the target component:

// MyComponent.js
import React from "react";
import { useNavigate } from "react-router-dom";
const MyComponent = ({ record }) => {
    const navigate = useNavigate();

    const handleEditClick = (record) => {
        navigate(`/edit/${record.id}`, {
            state: {
                client: record.id_client,
                ivr: record.id,
            },
            replace: false,
        });
    };

    return (
        <button onClick={() => handleEditClick(record)}>Edit</button>
    );
};

export default MyComponent;

// MyComponent.js
import React from "react";
import { useNavigate } from "react-router-dom";
const MyComponent = ({ record }) => {
    const navigate = useNavigate();

    const handleEditClick = (record) => {
        navigate(`/edit/${record.id}`, {
            state: {
                client: record.id_client,
                ivr: record.id,
            },
            replace: false,
        });
    };

    return (
        <button onClick={() => handleEditClick(record)}>Edit</button>
    );
};

export default MyComponent;

// EditComponent.js
import React from "react";
import { useLocation } from "react-router-dom";

const EditComponent = () => {
    const location = useLocation();
    const { client, ivr } = location.state || {};

    return (
        <div>
            <h1>Edit Component</h1>
            <p>Client ID: {client}</p>
            <p>IVR ID: {ivr}</p>
            {/* Render your form or other components here */}
        </div>
    );
};

export default EditComponent;

// EditComponent.js
import React from "react";
import { useLocation } from "react-router-dom";

const EditComponent = () => {
    const location = useLocation();
    const { client, ivr } = location.state || {};

    return (
        <div>
            <h1>Edit Component</h1>
            <p>Client ID: {client}</p>
            <p>IVR ID: {ivr}</p>
            {/* Render your form or other components here */}
        </div>
    );
};

export default EditComponent;

Conclusion Using the useNavigate hook is a straightforward way to navigate programmatically and pass state data between components in a React Router application. This method ensures that the data is not part of the URL but is still accessible in the target component. For more details, you can refer to the React Router documentation on useNavigate (https://refine.dev/blog/usenavigate-react-router-redirect/#how-to-use-the-usenavigate-hook) and passing state with useNavigate (https://refine.dev/blog/usenavigate-react-router-redirect/#path-with-optional-second-argument). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

harsh-harlequinOP•17mo ago

I have a form, and inside it, I will have various components: input, switch, checkbox. Using only the useForm, would I be able to use the return data from the API to populate the form components with the data? @kapa.ai

kapa.ai•17mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useForm hook to populate form components with data returned from the API. The useForm hook in Refine orchestrates data fetching and mutation logic, making it easier to handle form data. Here’s how you can achieve this: Step-by-Step Guide 1. Set Up the useForm Hook: Use the useForm hook to manage the form state and handle data fetching from the API.

    import React from "react";
    import { useForm } from "@refinedev/core";

    const EditPage = () => {
        const { queryResult, formLoading, onFinish } = useForm({
            resource: "products",
            action: "edit",
            id: 123, // Replace with the actual ID
        });

        const record = queryResult.data?.data;

        const onSubmit = (event) => {
            event.preventDefault();
            const data = Object.fromEntries(new FormData(event.target).entries());
            onFinish(data);
        };

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

        return (
            <form onSubmit={onSubmit}>
                <label>
                    Name:
                    <input name="name" defaultValue={record?.name} />
                </label>
                <label>
                    Material:
                    <input name="material" defaultValue={record?.material} />
                </label>
                <label>
                    Active:
                    <input type="checkbox" name="active" defaultChecked={record?.active} />
                </label>
                <button type="submit">Submit</button>
            </form>
        );
    };

    export default EditPage;

    import React from "react";
    import { useForm } from "@refinedev/core";

    const EditPage = () => {
        const { queryResult, formLoading, onFinish } = useForm({
            resource: "products",
            action: "edit",
            id: 123, // Replace with the actual ID
        });

        const record = queryResult.data?.data;

        const onSubmit = (event) => {
            event.preventDefault();
            const data = Object.fromEntries(new FormData(event.target).entries());
            onFinish(data);
        };

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

        return (
            <form onSubmit={onSubmit}>
                <label>
                    Name:
                    <input name="name" defaultValue={record?.name} />
                </label>
                <label>
                    Material:
                    <input name="material" defaultValue={record?.material} />
                </label>
                <label>
                    Active:
                    <input type="checkbox" name="active" defaultChecked={record?.active} />
                </label>
                <button type="submit">Submit</button>
            </form>
        );
    };

    export default EditPage;

2. Handle Different Form Components: You can include various form components like input, switch, and checkbox, and populate them with the data returned from the API.

    import React from "react";
    import { useForm } from "@refinedev/core";

    const EditPage = () => {
        const { queryResult, formLoading, onFinish } = useForm({
            resource: "products",
            action: "edit",
            id: 123, // Replace with the actual ID
        });

        const record = queryResult.data?.data;

        const onSubmit = (event) => {
            event.preventDefault();
            const data = Object.fromEntries(new FormData(event.target).entries());
            onFinish(data);
        };

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

        return (
            <form onSubmit={onSubmit}>
                <label>
                    Name:
                    <input name="name" defaultValue={record?.name} />
                </label>
                <label>
                    Material:
                    <input name="material" defaultValue={record?.material} />
                </label>
                <label>
                    Active:
                    <input type="checkbox" name="active" defaultChecked={record?.active} />
                </label>
                <label>
                    Notifications:
                    <input type="checkbox" name="notifications" defaultChecked={record?.notifications} />
                </label>
                <button type="submit">Submit</button>
            </form>
        );
    };

    export default EditPage;

    import React from "react";
    import { useForm } from "@refinedev/core";

    const EditPage = () => {
        const { queryResult, formLoading, onFinish } = useForm({
            resource: "products",
            action: "edit",
            id: 123, // Replace with the actual ID
        });

        const record = queryResult.data?.data;

        const onSubmit = (event) => {
            event.preventDefault();
            const data = Object.fromEntries(new FormData(event.target).entries());
            onFinish(data);
        };

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

        return (
            <form onSubmit={onSubmit}>
                <label>
                    Name:
                    <input name="name" defaultValue={record?.name} />
                </label>
                <label>
                    Material:
                    <input name="material" defaultValue={record?.material} />
                </label>
                <label>
                    Active:
                    <input type="checkbox" name="active" defaultChecked={record?.active} />
                </label>
                <label>
                    Notifications:
                    <input type="checkbox" name="notifications" defaultChecked={record?.notifications} />
                </label>
                <button type="submit">Submit</button>
            </form>
        );
    };

    export default EditPage;

Additional Information - Handling Data: The useForm hook orchestrates Refine's useOne, useUpdate, and useCreate hooks internally to provide a single interface for form handling. This means that the useForm hook will handle all of the data fetching and mutation logic for you. - Loading State: The formLoading state can be used ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•17mo ago

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

Passing Data Between Components

Did you find this page helpful?