antd Form.Item accepts only one child

Question

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>

Answer 1

I found a solution and have a better understanding now of what is going on.

From the docs (https://ant.design/components/form/#Form.Item):

After wrapped by Form.Item with name property, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls, the flow of form data will be handled by Form

There is a working example in the docs too, here is the codepen: https://codepen.io/pen?&editors=001

const {  useState  } = React;;
const {  Form, Input, Select, Button  } = antd;
const { Option } = Select;

const PriceInput = ({ value = {}, onChange }) => {
  const [number, setNumber] = useState(0);
  const [currency, setCurrency] = useState('rmb');

  const triggerChange = (changedValue) => {
    onChange?.({
      number,
      currency,
      ...value,
      ...changedValue,
    });
  };

  const onNumberChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10);

    if (Number.isNaN(number)) {
      return;
    }

    if (!('number' in value)) {
      setNumber(newNumber);
    }

    triggerChange({
      number: newNumber,
    });
  };

  const onCurrencyChange = (newCurrency) => {
    if (!('currency' in value)) {
      setCurrency(newCurrency);
    }

    triggerChange({
      currency: newCurrency,
    });
  };

  return (
    <span>
      <Input
        type="text"
        value={value.number || number}
        onChange={onNumberChange}
        style={{
          width: 100,
        }}
      />
      <Select
        value={value.currency || currency}
        style={{
          width: 80,
          margin: '0 8px',
        }}
        onChange={onCurrencyChange}
      >
        <Option value="rmb">RMB</Option>
        <Option value="dollar">Dollar</Option>
      </Select>
    </span>
  );
};

const Demo = () => {
  const onFinish = (values) => {
    console.log('Received values from form: ', values);
  };

  const checkPrice = (_, value) => {
    if (value.number > 0) {
      return Promise.resolve();
    }

    return Promise.reject(new Error('Price must be greater than zero!'));
  };

  return (
    <Form
      name="customized_form_controls"
      layout="inline"
      onFinish={onFinish}
      initialValues={{
        price: {
          number: 0,
          currency: 'rmb',
        },
      }}
    >
      <Form.Item
        name="price"
        label="Price"
        rules={[
          {
            validator: checkPrice,
          },
        ]}
      >
        <PriceInput />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, mountNode);

Answer 2

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.