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

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?

[buvinghausen]

@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" 
/>

[jdhiro]

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' />