Skip to content

Warning console : Each child in a list should have a unique “key” prop in table in code react.js

I want to correct the warning “Each child in a list should have a unique” key “prop” in the console. I tried adding the props “rowkey”, “key” in the but the problem still exists.

//***************************** Code ********************************//
class TableOfState extends React.Component {
render() {
const states = this.props.statesList;
const columns = [
//**************** I'm trying to add a column "id" *************************//
dataIndex: 'id',
key: 'id',
title: 'name',
dataIndex: 'name',
key: 'name',
title: 'Color',
dataIndex: 'color',
key: 'color',
return (
    //******************* The two solutions that I tried *******************//
        // key={}
        // id={}
        // rowkey={states.idDept}
        style={{ width: "100%" }}


Here is the warning on the console:: enter image description here



You need to add ‘key’ prop with unique value to all your data items

const dataSource = [
    key: '1',
    id: 1,
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
    key: '2',
    id: 2,
    name: 'John',
    age: 42,
    address: '10 Downing Street',

or if your items already have unique key (e.g. ‘id’), then specify it for Table component via rowKey prop:

<Table dataSource={dataSource} rowKey="id" ... />;
User contributions licensed under: CC BY-SA
3 People found this is helpful