CODEWITHSUNDEEP
reactjsformsantd
Max
Max

Reputation: 147

Antd form: passing dynamic id alongside form-values

im working on a commenting system. Every ID has some comments. If I want to make a new comment, the ID has to be passed alongside the form-values.

ID is being rendered dynamically:

{data && data.formations.map(formation =>
            <Row>
                <Col span={2}>
                    <p>ID: {formation.id}</p>
                </Col>
                ...

Form has a Textarea, and the value is being passed automatically due the name prop in Form.Item.

<Form onFinish={onFinish}>
    <Form.Item name="comment">
        <TextArea rows={4} />
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit">Add comment</Button>
    </Form.Item>
</Form>

Idealy, I want the ID passed alongside the values in the following function OnFinish:

const onFinish = (values) *id somehwere here* => {
    console.log(values)
}

How to achieve this? Thanks in advance!

Upvotes: 3

Views: 1772

Answers (1)

Florian Motteau
Florian Motteau

Reputation: 3724

You could solve this by adding an hidden field which holds the ID :

<Form onFinish={onFinish}>
    <Form.Item name="comment">
        <TextArea rows={4} />
    </Form.Item>
    <Form.Item name="id">
        <Input type="hidden" value={formation.id} />
    </Form.Item>
    <Form.Item>
        <Button type="primary" htmlType="submit">Add comment</Button>
    </Form.Item>
</Form>

Then in the onFinish callback you should get a new property id in the values object.

This is the common way to pass known/readonly values alongside form values (in the non SPA / synchronous web world, eg PHP).

Upvotes: 2

Related Questions