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>
)
}
initialValueswill not work. It will work for the first time when component renders. Useformhook 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 datagetDrawshas completed. solution B) add akeyto the form and updated it oncegetDrawshas completed (in effect remounting the form)