Solvedant design 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?

23 Answers

✔️Accepted Answer

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

Other Answers:

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.

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

That means the key of your data, not columns.

Related Issues:

431
ant design How to set 100% of height layout
This works for me: <Layout style={{height:100vh}}> I am a newbie I base on Meteor JS How to set 100%...
413
ant design Each record in table should have a unique key prop,or set rowKey to an unique primary key.
@ahmetkuslular The error message is pretty explicit your data set must contain items with a key prop...
153
ant design 😨 Table align broken when cell contains long number or long word after 3.11.3
超长连续字段(长数字和长单词) 破坏表格布局的问题(即使你指定了列的宽度也会被挤开),之前组件内默认加过 word-break: break-word; 去纠正此类布局,又会引起 #13624 的问题...
119
ant design Can't set form initialValues from state
I had the same problem sometimes the initialValues are empty and I need to fetch the initialValues f...
113
ant design CheckBox with Form was not work
I ran in to similar problem when i was trying to send form with selected checkbox because function v...
93
ant design import the antd theme, webpack build show .bezierEasingMixin error ?
version: antd@2.x less@2.x 是OK的。 less@3.x,需要开启 配置项 javascriptEnabled: true 但依然有错误: ...
81
ant design Check Box Validation not working
Following @yesmeck 's suggestion I came up with the following code which works as well ...
78
ant design Customization of theme is broken with latest version of less-loader
#23603 #23596 less-loader@5 less-loader@6 I have searched the issues of this repository and believe ...
59
ant design 引用国际化包报错
Change to fix this problem The resource provided by the document is wrong. I have searched the issue...
58
ant design Is there any way to disable all animations?
If anyone is wondering how to get rid of this clicked (glow fade-out) animation: Depending on the An...
38
ant design error TS2605 JSX element type Button is not a constructor function for JSX elements
Do you have allowSyntheticDefaultImports: true in tsconfig.json? Hello since this morning I am getti...
29
ant design Type error: Cannot find name 'ResizeObserver'.
The temporary fix is putting following interface to your typings/index.d.ts: I have searched the iss...
27
ant design Flash of unstyled content for first load
There is also a 'flash' of content reflow apparent on https://ant.design/components/layout/ - have a...
23
ant design Select Custom dropdown with dropdownRender property not respond to click
Another perhaps more elegant I have searched the issues of this repository and believe that this is ...
22
ant design Impossible to expand Select component dropdown programatically
@martis347 Propably it's mousedown event now instead of click I have searched the issues of this rep...
22
ant design Errors when importing antd.less using less-loader
You mean less@3.0.0-alpha.3? Could you try less@2.7.2? Version antd @2.13.4 webpack @3.6.0 less @3.0...
19
ant design Typing issues with Typescript 3 and new LibraryManagedAttributes feature
For me the workaround is adding skipLibCheck: true to tsconfig.json https://stackoverflow.com/a/5240...
18
ant design Webpack css loading
This issue is resolved for me when i remove part of the recommended .babelrc config for ant-design B...
18
ant design Menu.Item should have the onClick param
NOTE: Please click the thumb up (👍) rather than '+1' comment Wrapping with <a> works fine but I thi...
17
ant design Integrating with react-boilerplate
I found a workaround but I don't know why yet The dot can't existed in JSX expression for production...
17
ant design Equal height items
Using flexbox-enabled rows with type=flex and setting the height to 100% on the column contents work...
16
ant design useForm > getFieldValue does not work
In addition to this I also noticed that getFieldValue which is supposed to listen to field value cha...
14
ant design Button tsd error in latest typescript@3.4.2
Same here But I bypassed the problem by downgrading @types/react to 16.8.11 I think it breaks in bot...
14
ant design Long list optimization
SuperSelect is based on antd Select which supports a virtual list of tens of thousands of data the s...
13
ant design form demo element id not unique
@zhutiancheng2 给 Form 加个 name 就行了。react-component/form#197 Please add name to different Form: ...
12
ant design Add .focus .blur method for every form control components
@ChuckJonas That's exactly the problem Most of you probably want to really focus and open the rc-sel...
12
ant design Property 'value' does not exist on type 'EventTarget'.
See DefinitelyTyped/DefinitelyTyped#12239 you can try event.currentTarget. Version 2.12.1 Environmen...
12
ant design Table onRow Event multiple triggered
Perfect!!! It works with: Thanks a lot @yesmeck !!! Version 3.1.0 Environment macos 10.12.6 ...
9
ant design Menu.SubMenu SubMenu.js:452 Uncaught TypeError: Illegal invocation
Could you remove node_modules and package-lock.json(or yarn.lock) then try again? ...
5
ant design TS2304: Cannot find name 'PropertyKey'.
Because PropertyKey is in es2015 library so you should included es2015 in the compilation add lib op...
4
ant design How to make nested table show different data in different rows?
What problem does this feature solve? At parent table's rows there are different data in nested tabl...
8
ng zorro antd 9.0.0-beta.2 Fails to compile
Same problem with beta.3 and angular 9.1 but on many more components ng-zorro-antd/* A small extract...
4
ant design pro 🐛[BUG] Login doesn't work properly if /api/currentUser route is protected
I can also confirm that I've been hit by this It's much simpler to reproduce also ...
3
ant design mobile antd-mobile does not contain an export
Same issue occurred when I executed yarn build Version 1.1.3 Environment react (web browsers) Reprod...
8
slider How do I reset values for slider
No your first fiddle is still a uncontrolled component I have a slider as below which uses marks for...
397
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons https://www.npmjs.com/packag...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
116
material ui Working with react-hook-form
I have added the waiting for users upvotes tag I'm closing the issue as we are not sure people are l...
111
material ui @material-ui/styles: Usage in a Class Component?
i used withStyles instead of makeStyle like this... How does one use the makeStyles API within a cla...
111
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
107
material ui Unable to install @mui/material-icons last version
I found a solution here : yarnpkg/yarn#4890 (comment) So either install it using yarn add @mui/mater...
100
material ui theme.spacing is not a function with @material-ui/[styles/core] 4.0.1
Sorry I found the problem Trying to fix another issue today I tried to reset my whole Material-UI 4....
97
material ui Convert ListItem compatible with react-router
This is covered in the documentation: https://material-ui.com/components/buttons/#third-party-routin...
80
material ui Can we add new property for color in palette in MuiTheme
@davidcalhoun Yes you are right this issue is about extending the Button implementation so people ca...
79
storybook Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin
I also get the same issue as @matamatanot (also with tailwind 2.0.2) I might have missed something f...
76
material ui Tooltip issue using Jest: TypeError document.createRange is not a function
@MorganDbs See jsdom/jsdom#317 We use the following patch for our tests: Does it fix your problem? U...
76
material ui [Tabs] Improve TabPanel demos, avoid validateDOMNesting warning
Note: the warning appears only because the demo code has: Changing it like this takes care of it: ...
72
material ui [Table] Fixing head in material
To be noted the header can be sticky positioned: https://codesandbox.io/s/k0vwm7xpl3 ...
67
material ui [TextField] Handle Chrome autofill
Also notice the yellow background for auto filled text can it be overridden? @garygrubb I did this v...
65
storybook Storybook build fails in Node 13 (cannot find module @babel/compat-data/corejs3-shipped-proposals)
Removing node_modules and yarn.lock and using node 13.13 has been helped for me. ...