antd

antd Form.Item accepts only one child

I've created a little Fiddle to illustrate the issue: https://stackblitz.com/edit/react-avejvc-mmhqda?file=index.js

This form works:

      <Form initialValues={{ surname: 'Mouse'}}>
        <Form.Item name="surname">
          <Input />
        </Form.Item>
      </Form>

This form doesn't:

      <Form initialValues={{ surname: 'Mouse'}}>
        <Form.Item name="surname">
          <Input />
          {null}
        </Form.Item>
      </Form>

The only difference is that the Form.Item in the second form has two children.

Is there an intention behind this?

In case anyone wonders why I am asking. So sth like this is breaking the form:

<Form.Item name={name}>
  {type==="string" && <Input />}
  {type==="integer" && <InputNumber />}
</Form.Item>
Solution

  • The official documentation here gives examples of using multiple children in one Form.Item.

    <Form.Item label="Field">
    <Form.Item name="field" noStyle><Input /></Form.Item> // that will bind input
    <span>description</span>
</Form.Item>

    You appear to have a problem with what you are putting in the Form.Item, ie. {null} may not be allowed.