How to consult value of field with ant-design useForm?

Question

I have this form which I would like to show or hide fields depending on the value of other field(s) that are fix (they never hide) but using form.getFieldValue("some-field") always return undefined.

Here is a minimal functional example that showcase the issue I have:

What am I doing wrong with antd and how can I achieve my use case?

Answer 1

By looking into the official documentation, they have provided a way to use conditions inside <Form.Item>.

<Form.Item
  noStyle
  shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
>
  {({ getFieldValue }) =>
    getFieldValue('gender') === 'other' ? (
      <Form.Item
        name="customizeGender"
        label="Customize Gender"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
    ) : null
  }
</Form.Item>

I have changed your example to work as expected. Please check.