Observing the below warning in the console. On debugging it is observed that the warning is coming from antd table component.

All the code is attached below.

Table Component

 <Table
    columns={columns}
    dataSource={dataSource}
  />

dataSource

const dataSource = [
  {
    id: "1",
    todo: "todo-1",
    description: "description-1",
    status: false
  },
  {
    id: "2",
    todo: "todo-2",
    description: "description-2",
    status: true
  },
  {
    id: "3",
    todo: "todo-3",
    description: "description-3",
    status: false
  }
];

columns

const columns = [
  {
    title: "Todo",
    dataIndex: "todo",
    key: "todo"
  },
  {
    title: "Description",
    dataIndex: "description",
    key: "description"
  },
  {
    title: "Status",
    dataIndex: "status",
    key: "status",
    render: (tag) => (
      <>
        <Tag color={tag ? "green" : "red"}>{tag ? "Done" : "Pending"}</Tag>
      </>
    )
  }
];

CodePudding user response：

2 ways of doing this!

The warning is because every row(todo) in dataSource didn't have a unique property key.

You can fix this by choosing one of the following ways.

1. Add a property key with a unique value for every object in the array dataSource.

2. Here in the dataSource the property id seems to be unique for each row. You need to make the table component consider the id property for identifying a specific row uniquely.

You can do this by passing a rowKey prop to the Table Component.

  <Table
    columns={columns}
    dataSource={dataSource}
    rowKey={(record) => record.id}
  />

Note: Here id is unique. So the code is as above. If in case the unique value is with another key index then you need to change the code accordingly. (as below)

rowKey={(record) => record.index}