Ant-design: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

Created on 15 Sep 2017  ·  16Comments  ·  Source: ant-design/ant-design

I'm trying to figure out how can I get unique keys for each record.

So far, my code looks like this:

let lastIndex = 0
const updateIndex = () => {
  lastIndex++
  return lastIndex
}

...

constructor() {
  super()

  this.state = {
    columns: [ {
      title: 'Nombre',
      dataIndex: 'name',
      key: `name${updateIndex()}`
    }, {
      title: 'Precio',
      dataIndex: 'price',
      key: `price${updateIndex()}`
    }, {
      title: 'Precio regular',
      dataIndex: 'regularPrice',
      key: `regularPrice${updateIndex()}`
    }, {
      title: 'Categoría(s)',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          {
            record.categories.map((r, index) => (
              <span key={index}>
                {
                  index > 0 &&
                  <span className="ant-divider"/>
                }
                <span>{r.name}</span>
              </span>
            ))
          }
        </span>
      )
    }, {
      title: 'Action',
      key: `id${updateIndex()}`,
      render: (text, record) => (
        <span>
          <a href="#">Editar - {record.name}</a>
          <span className="ant-divider"/>
          <a href="#" style={{color: 'red'}}>Borrar</a>
        </span>
      )
    }, ]
  }
}

But I'm still getting the error that each record in table should have a unique key.

What would be the best way to achieve this?

Invalid

Most helpful comment

@ahmetkuslular The error message is pretty explicit your data set must contain items with a key property on them or you must specify the rowKey property on the Table component with the name from a field in your dataset which is unique to each row.

Source Code Here

<Table 
  columns={columns} 
  dataSource={this.props.categories} 
  rowKey="name" 
/>

All 16 comments

Hello @johhansantana, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

That means the key of your data, not columns.

I have the same problem. How can we solve this? @ant-design-bot @afc163

With columns if not set dataIndex property, column key should be set unique key.

@johhansantana key not unique ↓

title: 'Categoría(s)',
key: `id${updateIndex()}`,
...
title: 'Action',
key: `id${updateIndex()}`,

I did not fully understand what we had to do. @lijinlone

@ahmetkuslular The error message is pretty explicit your data set must contain items with a key property on them or you must specify the rowKey property on the Table component with the name from a field in your dataset which is unique to each row.

Source Code Here

<Table 
  columns={columns} 
  dataSource={this.props.categories} 
  rowKey="name" 
/>

This one was confusing to me as well, because I was confusing COLUMN keys with ROW keys. This error has nothing to do with "key" in your column config.

Ant is expecting you to have a unique key specifically named "key" on each row of data, like so:

{ key: 1, value: 'foo'}

My data had "id" instead:

{ id: 1, value: 'foo'}

In order to resolve this, I added a rowKey property to my Table like so:

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

<Table .... rowKey={record => record.countryId} ... /> fixed it for me.
countryId being a unique values on each item field in your data.

In Ant-design table, rowKey props type is string.
So I added it as string using uuid. so I resolved error.

Hey guys, adding rowKey to Table solved my issue
<Table rowKey="id" ...../>

and 'id' is key of one of the column inside table as -
const columns = [
{
title: '#',
dataIndex: data.id,
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
.
.
yeah and my id is a unique string too. By this change, I can see columns have an id set as 'data-row-key' property for each column and no warning now.

solution 1

each col has on unique key

// each column with unique key

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
    key: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
    key: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;


solution 2

only need set rowkey on the table with unique value

// table with rowkey

import React from 'react';

import {
  Table,
} from 'antd';

const leftTableColumns = [
  {
    title: 'Page / Modal',
    dataIndex: 'pageModal',
  },
  {
    title: 'Success Rate',
    dataIndex: 'successRate',
  },
];

const LeftTable = (props) => {
  const {
    leftTableDatas,
  } = props;
  return (
    <>
      <Table
        // shorthand rowKey
        rowkey="id"
        // rowKey={obj => obj.id}
        columns={leftTableColumns}
        dataSource={leftTableDatas}
      />
    </>
  );
};

export {
  LeftTable,
};

export default LeftTable;


ref

https://ant.design/components/table/

image

@xgqfrms, in solution 2, you can shorten the rowKey prop to rowkey="id". It works the same.

What I am getting is this message

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

indicating that the problem in the TableCell, but how can I set the key prop there?

I have noticed the examples on Antd page are not throwing this error.

Thanks for help.

What I am getting is this message

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `TableRow`. See https://fb.me/react-warning-keys for more information.
    in TableCell (created by TableRow)
    in TableRow (created by Connect(TableRow))
    in Connect(TableRow) (created by ExpandableRow)

Hey, I've just figured it out. In columns prop, you need to have either dataIndex or key.

It is mentioned in this section: https://ant.design/components/table/#Column

@tuanalumi, thanks for pointing that out, I have added key and I am no longer getting that warning!

This one was confusing to me as well, because I was confusing COLUMN keys with ROW keys. This error has nothing to do with "key" in your column config.

Ant is expecting you to have a unique key specifically named "key" on each row of data, like so:

{ key: 1, value: 'foo'}

My data had "id" instead:

{ id: 1, value: 'foo'}

In order to resolve this, I added a rowKey property to my Table like so:

<Table columns={this.columns} dataSource={this.state.results} rowKey='id' />

fixed it for me, thanks

Was this page helpful?
0 / 5 - 0 ratings