Warning message using ant design dynamic form

Question

I am using ant design dynamic form like this: https://codesandbox.io/s/wsuv8 . I have separated the form items also using div tag like:

 <div className="my-div"> <Form.Item {...field} name={[field.name, "first"]} fieldKey={[field.fieldKey, "first"]} rules={[{ required: true, message: "Missing first name" }]} > <Input placeholder="First Name" /> </Form.Item> </div> <div className="my-div"> <Form.Item {...field} name={[field.name, "last"]} fieldKey={[field.fieldKey, "last"]} rules={[{ required: true, message: "Missing last name" }]} > <Input placeholder="Last Name" /> </Form.Item> </div>

When i add new inputs, in my project, clicking on Add field button i get the next warning:

 Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

This warning disappears when i delete div tags between inputs.

I now that this warning appears when forget to set the key for the items inside map() for example, but in my case the key is set for the component that wrap the entire form:

 <Space key={field.key} // the key is set here style={{ display: "flex", marginBottom: 8 }} align="start" >

Question: Why the warning appears if the key is set in <Space> component and how to solve the issue?

Answer 1

You should get name and key with object destructuring and get...restFields, then spread restFields to formItem

{fields.map(({ key, name, ...restField }, index) => (
   <Form.Item
    {...restField}
    name={[name, 'columnName']}
   />
   ....
   ....
   ....
)}