Add unique keys for items in reactjs

Question

I have the next application: https://codesandbox.io/s/suspicious-murdock-87j13?file=/SubForm.js

 <Form.List name="names">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => {
                console.log("m", field);
                return (
                  <Form.Item
                    {...(index === 0
                      ? formItemLayout
                      : formItemLayoutWithOutLabel)}
                    label={index === 0 ? "Passengers" : ""}
                    required={false}
                    key={index}
                  >
                    <Form.Item
                      {...field}
                      name={[field.name, "outer"]}
                      fieldKey={[field.fieldKey, "outer"]}
                      validateTrigger={["onChange", "onBlur"]}
                      rules={[
                        {
                          required: true,
                          whitespace: true,
                          message:
                            "Please input passenger's name or delete this field."
                        }
                      ]}
                      noStyle
                    >
                      <Input
                        placeholder="passenger name"
                        style={{ width: "60%" }}
                      />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      name={[field.name, "outer1"]}
                      fieldKey={[field.fieldKey, "outer1"]}
                      validateTrigger={["onChange", "onBlur"]}
                      rules={[
                        {
                          required: true,
                          whitespace: true,
                          message:
                            "Please input passenger's name or delete this field."
                        }
                      ]}
                      noStyle
                    >
                      <Input
                        placeholder="passenger name"
                        style={{ width: "60%" }}
                      />
                    </Form.Item>
                    <Form.Item>
                      <InnerForm fieldKey={field.key} />
                    </Form.Item>
                    {fields.length > 1 ? (
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: "0 8px" }}
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    ) : null}
                  </Form.Item>
                );
              })}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: "60%" }}
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

When user click on Add field button, in console appears the warning:

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.

Also this warning appears when i click on Add sub-field. I can't figure out why this warning appears.
Question: Why the above warning appears and how to remove it?

Keys help React identity which items have changed (added/removed/re-ordered). To give a unique identity to every element inside the array, a key is required. So you need to add a unique key for all of the react element rendering in the page. The system should be key={keyName} — MANISH KUMAR CHOUDHARY
– MANISH KUMAR CHOUDHARY, Commented Jul 3, 2020 at 10:45
@MANISHKUMARCHOUDHARY, but now all items have keys, where could be the problem? — Asking
– Asking, Commented Jul 3, 2020 at 10:46
console.log(index) I think the two keys have same value. We should avoid component with a duplicate key too. The problem should be inside the map(..) function where the key value is getting mapped — MANISH KUMAR CHOUDHARY
– MANISH KUMAR CHOUDHARY, Commented Jul 3, 2020 at 10:49
@MANISHKUMARCHOUDHARY, inside map() every item has key={index}. Why the warning could appear? — Asking
– Asking, Commented Jul 3, 2020 at 10:52
because the index value will be the same for both the <Form.Item> right? — MANISH KUMAR CHOUDHARY
– MANISH KUMAR CHOUDHARY, Commented Jul 3, 2020 at 10:56

songzhj · Accepted Answer · 2020-07-03 11:06:07Z

2

You have two Form.Item Component in your code, and they use same key index, try to use different key like 'item1' + index and 'item2' + index.

And, in your index.js file also have same problem.

Here is Demo forked from you: https://codesandbox.io/s/dark-darkness-xz0wf?file=/SubForm.js

answered Jul 3, 2020 at 11:06

songzhj

581 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subhadeep · Accepted Answer · 2020-07-03 10:51:36Z

0

As reactJs primary works on re rendering items every time you make a change the state of that component. It requires an unique key to track each and every item so that re-rendering can be optimized. Not all items needs to be re-render every time.

This warning essentially means that you have multiple items with same key names. In order to fix this you have to provide unique "key" attribute to each child component which is getting updated, components which can potentially trigger an re-render.

edited Jul 3, 2020 at 10:51

answered Jul 3, 2020 at 10:48

Subhadeep

1495 bronze badges

2 Comments

Asking Over a year ago

,i checked my code and now all elements have keys, but i can't figure out how to change the code to make disappearing the warning, could you help please?

Subhadeep Over a year ago

one request first : passing index as key value is an anti-pattern it can cause a lot of problem. Could you please pass some unique values to key instead of 'index' and again check once.

Danish · Accepted Answer · 2020-07-03 11:23:46Z

you don't need to use multiple times key={index} or key={"g"} use once only.

Please try following

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

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

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
                  <Form.Item
                    {...field}
                    name={[field.name, 'innerName']}
                    fieldKey={[field.fieldKey, 'innerName']}
                    
                  >
                    <Input placeholder="passenger 1" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, 'innerName2']}
                    fieldKey={[field.fieldKey, 'innerName2']}
                  >
                    <Input placeholder="passenger 2" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

Collectives™ on Stack Overflow

Add unique keys for items in reactjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related