How to set the key properly when creating the elements in loop

Question

Can't figure out why I get this warning:

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using BootstrapTable."

My code:

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const data = [
  {id: 1, name: 'Item name 1', price: 100},
  {id: 3, name: 'Item name 3', price: 55},
  {id: 2, name: 'Item name 2', price: 100}
];

const cols = Object.keys(data[0]);

export default () => {
  return (
    <BootstrapTable data={data}>          
      {cols.map(name => {
        let key = name === 'id' ? true : false;
        return (
          <TableHeaderColumn dataField={name} isKey={key}>
            {name}
          </TableHeaderColumn>
        );
      })}
    </BootstrapTable>
  );
};`

Possible duplicate of [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Mayank Shukla, Aug 13 '17 at 10:51

score -1 · Accepted Answer · answered Aug 13 '17 at 11:02

Problem is that React doesn't recognise your components.So you have to give them some identification.The easiest way is to pass an index.

When you do map() you can get the item and his position from the array.And that position you pass into your top level component inside loop

export default () => {


return (
    <BootstrapTable data={data}>          
      {cols.map((name,i) => {
        let key = name === 'id' ? true : false;
        return (
          <TableHeaderColumn key={i} dataField={name} isKey={key}>
            {name}
          </TableHeaderColumn>
        );
      })}
    </BootstrapTable>
  );
};`

I thought that isKey handles all that but clearly it doesn't work that way. — noobDev, Aug 13 '17 at 11:10

How to set the key properly when creating the elements in loop

1 Answers1