React Warning: flattenChildren(…): Encountered two children with the same key, `.${index}`

Question

When trying to map and display items I get from external api, I get the error saying there are children with the same key, even though I know the ids are different and there's only first card displayed.

This throws the error, doesn't matter if I use {test.id} or {index} as a key:

 {tests.map( test =>
       <Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}">
         <Card title={test.title} bordered={false}>{test.content}</Card>
       </Col> )}

But on the other hand, when I try to display it in simple <ul> :

{tests.map( test =>
  <li className="list-group-item" key={test.id}>
    {test.title}
  </li>
)}

Everything works fine and I display all of the items I received.

I'm still new to React and Redux so I'm not really sure where to look for a solution.

Thanks a lot.

Answer 1

Change this line:

   <Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}">

to

   <Col span="8" xs={{span:22}} md={{span:6}} key={test.id}>

{test.id} wrapped in double quotes makes it a string, so it's always the same.