title: ReactJS hide first child of map function
body: <p>I am building a BlackJack game  and I am mapping over a dealer cards array to display the dealer cards. I want to hide the first card that is returned from the array.</p>
  
  <p>This is my DealerCards component.</p>
  
  <pre><code>import React from 'react'
  
  const DealerCards = props =&gt; {
    return (
      &lt;div className="text-center"&gt;
        Dealer Cards
        &lt;div className="text-center m-auto flex justify-center"&gt;
          {props.dealerCards.length &gt; 0 ? (
            &lt;div className="mx-auto flex justify-center"&gt;
              {props.dealerCards.map(card =&gt; (
                &lt;div key={card[0].code}&gt;
                  &lt;img
                    className="m-5 h-40 dealer-cards"
                    src={card[0].image}
                    alt={card[0].code}
                  /&gt;
                &lt;/div&gt;
              ))}
            &lt;/div&gt;
          ) : (
            &lt;div&gt;&lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default DealerCards
  </code></pre>
  
  <p>And this is the CSS I am using to try and hide it.</p>
  
  <pre class="lang-css prettyprint-override"><code>.dealer-cards:first-of-type {
    display: none;
  }
  </code></pre>
  
  <p>I also tried moving the <code>dealer-cards</code> className to the images parent div but got the same result.<br>
  What am I doing wrong??
  Let me know if you need to see more of the code.  </p>