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?
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.
<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.
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;
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;
@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
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