title: React unique key when mapping warning
body: <p>I'm quite new to react and I'm facing a problem I can't solve. Here is my react component:</p>
  
  <pre><code>import React from 'react';
  import Header from './Header';
  import ContestPreview from './ContestPreview';
  
  class App extends React.Component {
  
      state = { 
          pageHeader: 'Naming Contests',
          whatever: 'test'
      };
  
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;Header message={this.state.pageHeader} /&gt;
                  &lt;div&gt;
                      {this.props.contests.map(contest =&gt;
                          &lt;ContestPreview key={contest.id} {...contest} /&gt;
                      )}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>This Code gives me the following warning:</p>
  
  <blockquote>
    <p>Warning: Each child in an array or iterator should have a unique "key"
    prop. Check the render method of <code>App</code>. See
    HERE-FB-URL-I-REMOVED for more information.
        in ContestPreview (created by App)
        in App</p>
  </blockquote>
  
  <p>I totally understand what this error means. I understand that each element of an array should have a unique key when looping trough them. What I don't understand is why I get the error, since in my opionion the key should be defined with my <code>&lt;ContestPreview key={contest.id} {...contest} /&gt;</code> ... is <code>key={contest.id}</code> not enough? </p>
  
  <p>Here is my contest data:</p>
  
  <pre><code>{
    "contests": [
      {
        "id": 1,
        "categoryName": "Business/Company",
        "contestName": "Cognitive Building Bricks"
      },
      {
        "id": 2,
        "categoryName": "Magazine/Newsletter",
        "contestName": "Educating people about sustainable food production"
      },
      {
        "id": 3,
        "categoryName": "Software Component",
        "contestName": "Big Data Analytics for Cash Circulation"
      },
      {
        "id": 4,
        "categoryName": "Website",
        "contestName": "Free programming books"
      }
    ]
  }
  </code></pre>
  
  <p>In my opionion it should work, I can't understand why I still get this error. I would really like to get some help on my problem, it would be really cool if someone can explain me whats going on here since I really try to understand how it works.</p>
  
  <p>Thank you for your help! :)</p>