title: index.js:1375 Warning: Each child in a list should have a unique "key" prop
body: <p>I wrote a BlackJack game, however after I query API from deck of cards API, the cards never showed on the screen. I have console log'd the player deck and deal deck, it has the card data but nothing displayed.</p>
  <p>heres the error:
  index.js:1375 Warning: Each child in a list should have a unique &quot;key&quot; prop.</p>
  <p>Check the render method of <code>BlackJack</code>. See <a href="https://reactjs.org/link/warning-keys" rel="nofollow noreferrer">https://reactjs.org/link/warning-keys</a> for more information.
  at div
  at BlackJack (http://localhost:3000/static/js/main.chunk.js:4166:3)
  at WithStyles(BlackJack) (http://localhost:3000/static/js/0.chunk.js:54861:31)</p>
  <p>this is the data after query</p>
  <pre><code>[Array(2)]
  0: Array(2)
  0: {code: &quot;6C&quot;, image: &quot;https://deckofcardsapi.com/static/img/6C.png&quot;, images: {…}, value: &quot;6&quot;, suit: &quot;CLUBS&quot;}
  1: {code: &quot;JD&quot;, image: &quot;https://deckofcardsapi.com/static/img/JD.png&quot;, images: {…}, value: &quot;JACK&quot;, suit: &quot;DIAMONDS&quot;}
  length: 2
  __proto__: Array(0)
  length: 1
  __proto__: Array(0)
  
  [Array(1)]
  0: Array(1)
  0: {code: &quot;4H&quot;, image: &quot;https://deckofcardsapi.com/static/img/4H.png&quot;, images: {…}, value: &quot;4&quot;, suit: &quot;HEARTS&quot;}
  length: 1
  __proto__: Array(0)
  length: 1
  __proto__: Array(0)
  </code></pre>
  <p>below is my code:</p>
  <pre><code>import React, { useState, useEffect, useCallback } from 'react';
  import axios from 'axios';
  import { withStyles } from '@material-ui/core/styles';
  
  const styles = () =&gt; ({
    app: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column'
    },
    deckContainer: {
      textAlign: 'center'
    }
  })
  
  const BlackJack = ({ classes }) =&gt; {
    const [deckId, setDeckId] = useState(null);
    const [playerDeck, setPlayerDeck] = useState([]);
    const [dealerDeck, setDealerDeck] = useState([]);
    const [gameOver, setGameOver] = useState(false);
    const [winner, setWinner] = useState(null);
  
    useEffect(async () =&gt; {
      const deck_id = await axios.get('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
        .then(res =&gt; res.data.deck_id);
      setDeckId(deck_id);
    }, []);
  
    const handleStartGame = async () =&gt; {
  
      const playerDeckList = [];
      const dealerDeckList = [];
      const playerDrawnCards = await axios.get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`).then(res =&gt; res.data.cards);
      playerDeckList.push(playerDrawnCards);
      setPlayerDeck(playerDeckList);
  
      const dealerDrawnCards = await axios.get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`).then(res =&gt; res.data.cards);
      dealerDeckList.push(dealerDrawnCards);
      setDealerDeck(dealerDeckList);
    };
    console.log(deckId);
    console.log(playerDeck);
    console.log(dealerDeck);
    // console.log(playerDeck[0]);
  
  
    return (
      &lt;div className={classes.app}&gt;
        &lt;h1&gt;Welcome to the Black Jack Game&lt;/h1&gt;
        &lt;br /&gt;
        &lt;div&gt;
          &lt;button onClick={handleStartGame}&gt;start game&lt;/button&gt;
          {/* &lt;button onClick={handlePlayerHit}&gt;hit&lt;/button&gt; */}
          {/* &lt;button onClick={handlePlayerStand}&gt;stand&lt;/button&gt; */}
          {/* &lt;button onClick={handlePlayerReset}&gt;reset game&lt;/button&gt; */}
        &lt;/div&gt;
        &lt;div&gt;
          {/* &lt;GameOver isGameOver={gameOver} /&gt; */}
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div&gt;
          &lt;h2&gt;Dealer: &lt;/h2&gt;
          &lt;div className={classes.deckContainer}&gt;
            {dealerDeck.map(card =&gt; {
              return (
                &lt;div key={card.code}&gt;
                  &lt;img
                    src={card.image}
                    alt={card.value}
                  /&gt;
                &lt;/div&gt;
              )
            })}
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;h2&gt;Player: &lt;/h2&gt;
          &lt;div className={classes.deckContainer}&gt;
            {playerDeck.map(card =&gt; {
              return (
                &lt;div key={card.code}&gt;
                  &lt;img
                    src={card.image}
                    alt={card.value}
                  /&gt;
                &lt;/div&gt;
              )
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  };
  </code></pre>
  <p>export default withStyles(styles)(BlackJack);</p>