useForm on load data for edit

How to trigger another function when data loaded

2 Replies

Hi @viveksingh0143. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To trigger another function when data is loaded using the useForm hook in refine, you can utilize the React.useEffect hook to watch for changes in the query result. When the data is successfully fetched, you can call your desired function. Here's an example of how you can achieve this:

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

const EditPage = () => {
    const { query, formLoading, onFinish } = useForm({
        resource: "products",
        action: "edit",
        id: 123,
    });

    const record = query.data?.data;

    React.useEffect(() => {
        if (record) {
            // Call your function here when data is loaded
            myFunction(record);
        }
    }, [record]);

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

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

const myFunction = (data) => {
    console.log("Data loaded:", data);
    // Add your custom logic here
};

export default EditPage;

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

const EditPage = () => {
    const { query, formLoading, onFinish } = useForm({
        resource: "products",
        action: "edit",
        id: 123,
    });

    const record = query.data?.data;

    React.useEffect(() => {
        if (record) {
            // Call your function here when data is loaded
            myFunction(record);
        }
    }, [record]);

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

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

const myFunction = (data) => {
    console.log("Data loaded:", data);
    // Add your custom logic here
};

export default EditPage;

In this example: - The useForm hook is used to fetch the data for the edit action. - The React.useEffect hook is used to watch for changes in the record variable, which holds the fetched data. - When record is updated with the fetched data, the myFunction function is called with the loaded data. This approach ensures that your custom function is triggered whenever the data is successfully loaded. For more information, you can refer to the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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