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 ( <div> <Widget> <Row> <Table //******************* The two solutions that I tried *******************// // key={states.id} // id={states.id} // rowkey={states.idDept} dataSource={states} columns={columns} pagination={true} className="gx-table-responsive" style={{ width: "100%" }} /> </Row> </Widget> </div> ) } }
Here is the warning on the console::
Advertisement
Answer
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" ... />;