title: React Warning: flattenChildren(...): Encountered two children with the same key, `.${index}`
body: <p>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.</p>
  
  <p>This throws the error, doesn't matter if I use <code>{test.id}</code> or <code>{index}</code> as a key:</p>
  
  <pre><code> {tests.map( test =&gt;
         &lt;Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}"&gt;
           &lt;Card title={test.title} bordered={false}&gt;{test.content}&lt;/Card&gt;
         &lt;/Col&gt; )}
  </code></pre>
  
  <p>But on the other hand, when I try to display it in simple <code>&lt;ul&gt;</code>:</p>
  
  <pre><code>{tests.map( test =&gt;
    &lt;li className="list-group-item" key={test.id}&gt;
      {test.title}
    &lt;/li&gt;
  )}
  </code></pre>
  
  <p>Everything works fine and I display all of the items I received.</p>
  
  <p>I'm still new to React and Redux so I'm not really sure where to look for a solution.</p>
  
  <p>Thanks a lot.</p>