0

I am trying to pass data to antd form and set the values of the data as default value of the input form but nothing displays on the input.

I get the id from from the url and use the id to fetch data from the backend which I pass to the form as default value.

winningTags.name directly under the card component displays the name but the one passed to the form does not display.

const EditWinningTags = () => {

    const { id } = useParams()
    const [winningTags, setWinningTags] = useState([])

    useEffect(() => {
        const getDraws = async () => {
            const res = await CategoryServices.getSingleWinningTags(id);
            console.log(res.data.data.name)
            if (res.data.data) setWinningTags(res.data.data)

        }
        getDraws()
    }, []);


    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log(values);
    };
    const onReset = () => {
        form.resetFields();
    };
    console.log("name ", winningTags.name)
    return (
        <div className="d-flex justify-content-center align-items-center" style={{ "height": "70vh" }}>
            <Card title="Edit Winning Tag" style={{ width: 600 }}>
                {winningTags && winningTags.name}
                <Form
                    {...layout}
                    form={form}
                    initialValues={{
                        name: winningTags && winningTags.name,
                        stake_price: winningTags && winningTags.stake_price,
                    }}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{
                        maxWidth: 600,
                    }}
                >
                    <Form.Item
                        name="name"
                        label="Name"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="stake_price"
                        label="Stake Price"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input type='text' values="Mon" />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}
2
  • 2
    initialValues will not work. It will work for the first time when component renders. Use form hook to set values when you receive the response: form.setFieldsValue(res.data.data). In your case, you may not need state to store the response data Commented Oct 24, 2023 at 8:39
  • 1
    solution A) do not render the form until getDraws has completed. solution B) add a key to the form and updated it once getDraws has completed (in effect remounting the form) Commented Oct 24, 2023 at 16:16

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.