environmental-rose•5mo ago

custom handle edit page field

Hi, I have a checkbox that dynamically shows an input when checked. this input is called realtorFee and represent a field in the backend, now the toggle is called realtorFeeToggle which is just a frontend conditional input to show that field. This works on the create page just fine, but on the edit page the switch is always off, even if the realtorFee has a value. How can I modify my antd design edit page for my resource so the toggle is enabled when realtorFee has a value (not null)?

2 Replies

kapa.ai•5mo ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve the desired behavior on your edit page, you can use the useForm hook from @refinedev/antd to manage the form state and conditionally set the realtorFeeToggle based on the value of realtorFee. Here is a step-by-step guide to help you implement this: 1. Initialize the Form with useForm: Use the useForm hook to manage the form state and fetch the initial data. 2. Set Initial Values: When the form is initialized, check if realtorFee has a value and set the realtorFeeToggle accordingly. 3. Conditional Rendering: Use the state of realtorFeeToggle to conditionally render the realtorFee input field. Here is an example implementation:

import React, { useEffect, useState } from "react";
import { useForm, Edit } from "@refinedev/antd";
import { Form, Input, Switch } from "antd";

const EditPage = () => {
    const { formProps, saveButtonProps, queryResult } = useForm();
    const [realtorFeeToggle, setRealtorFeeToggle] = useState(false);

    useEffect(() => {
        if (queryResult?.data?.data?.realtorFee) {
            setRealtorFeeToggle(true);
        }
    }, [queryResult?.data?.data?.realtorFee]);

    const handleToggleChange = (checked) => {
        setRealtorFeeToggle(checked);
    };

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item label="Realtor Fee Toggle" name="realtorFeeToggle">
                    <Switch checked={realtorFeeToggle} onChange={handleToggleChange} />
                </Form.Item>
                {realtorFeeToggle && (
                    <Form.Item label="Realtor Fee" name="realtorFee">
                        <Input />
                    </Form.Item>
                )}
            </Form>
        </Edit>
    );
};

export default EditPage;

import React, { useEffect, useState } from "react";
import { useForm, Edit } from "@refinedev/antd";
import { Form, Input, Switch } from "antd";

const EditPage = () => {
    const { formProps, saveButtonProps, queryResult } = useForm();
    const [realtorFeeToggle, setRealtorFeeToggle] = useState(false);

    useEffect(() => {
        if (queryResult?.data?.data?.realtorFee) {
            setRealtorFeeToggle(true);
        }
    }, [queryResult?.data?.data?.realtorFee]);

    const handleToggleChange = (checked) => {
        setRealtorFeeToggle(checked);
    };

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item label="Realtor Fee Toggle" name="realtorFeeToggle">
                    <Switch checked={realtorFeeToggle} onChange={handleToggleChange} />
                </Form.Item>
                {realtorFeeToggle && (
                    <Form.Item label="Realtor Fee" name="realtorFee">
                        <Input />
                    </Form.Item>
                )}
            </Form>
        </Edit>
    );
};

export default EditPage;

Explanation: 1. useForm Hook: The useForm hook is used to manage the form state and fetch the initial data for the edit page. 2. useEffect Hook: The useEffect hook checks if realtorFee has a value when the component mounts or when queryResult changes. If realtorFee has a value, it sets the realtorFeeToggle to true. 3. Switch Component: The Switch component is used to toggle the visibility of the realtorFee input field. 4. Conditional Rendering: The realtorFee input field is conditionally rendered based on the state of realtorFeeToggle. This approach ensures that the realtorFeeToggle is correctly set based on the initial value of realtorFee when the edit page is loaded. For more information on using the useForm hook, you can refer to the official documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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