title: Encountered two children with the same key in React
body: <p>I'm currently trying to learn how to create a webapp to interact with an Ethereum contract I wrote. Therefore I have chosen to learn how use React and Semantic-UI.</p>
  
  <p>The page I am working on is not working as I would expected. It does not show the CardGroup because of an error that I do not understand:</p>
  
  <pre><code>warning.js?040ca1d:33 Warning: Encountered two children with the same key, `-`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
      in div (created by CardGroup)
      in CardGroup (at index.js?entry:30)
      in div (at index.js?entry:37)
      in div (at Layout.js:5)
      in Unknown (at index.js?entry:36)
      in BiddingCreator (created by Container)
      in AppContainer (created by Container)
      in Container (created by App)
      in div (created by App)
      in App
  </code></pre>
  
  <p>Here is my current code:</p>
  
  <pre><code>import React, {Component} from 'react';
  import biddingCreator from '../Ethereum/BiddingCreator';
  import {Card} from 'semantic-ui-react';
  import Layout from '../components/Layout'
  
  const compiledBidding = require('../Ethereum/build/Bidding.json');
  
  class BiddingCreator extends Component{
  
    static async getInitialProps(){
      const biddings = await biddingCreator.methods.getBiddings().call();
  
      const items = await biddings.map( async address =&gt; {
        var summary = await biddingCreator.methods.viewBidding(address).call();
        console.log(summary);
        console.log(address);
        return {
          header: address,
          description: summary[1],
          meta: address,
          fluid: true
        };
  
      });
  
      return { biddings, items};
    }
  
   renderBiddings(){
      console.log(this.props.items);
      return &lt;Card.Group items={this.props.items} /&gt;;
  }
  
    render(){
  
      return(
        &lt;Layout&gt;
         &lt;div&gt;
  
      {this.renderBiddings()}
      &lt;/div&gt;
      &lt;/Layout&gt;
    )
    }
  }
  
  export default BiddingCreator;
  </code></pre>
  
  <p>Can someone please explain me what I am doing wrong and what this error means? </p>