ReactJS hide first child of map function

Question

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.

This is my DealerCards component.

import React from 'react'

const DealerCards = props => {
  return (
    <div className="text-center">
      Dealer Cards
      <div className="text-center m-auto flex justify-center">
        {props.dealerCards.length > 0 ? (
          <div className="mx-auto flex justify-center">
            {props.dealerCards.map(card => (
              <div key={card[0].code}>
                <img
                  className="m-5 h-40 dealer-cards"
                  src={card[0].image}
                  alt={card[0].code}
                />
              </div>
            ))}
          </div>
        ) : (
          <div></div>
        )}
      </div>
    </div>
  )
}

export default DealerCards

And this is the CSS I am using to try and hide it.

.dealer-cards:first-of-type {
  display: none;
}

I also tried moving the dealer-cards className to the images parent div but got the same result.
What am I doing wrong?? Let me know if you need to see more of the code.

You're right, thank you. My approach was off....any ideas how I should approach this then? — Leo Policastro, Dec 30 '19 at 02:54
If you don't need the first card in the DOM, you could skip it. `dealerCards.slice(1).map(...)` — Eric Guan, Dec 30 '19 at 02:56
So I found the answer in a separate post [CSS selector for first element with class](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class)... — Leo Policastro, Dec 30 '19 at 03:01

score 1 · Answer 1 · answered Dec 30 '19 at 03:16

1

dealerCards.slice(1).map(...) will hide the first child.

answered Dec 30 '19 at 03:16

k1r4n

159
6

score 1 · Answer 2 · answered Dec 30 '19 at 03:24

1

You can update existing CSS style to like this,

.dealer-cards:nth-child(1) { display: none; }

I think this may help you.

answered Dec 30 '19 at 03:24

Janaka Pushpakumara

4,769
5
29
34

ReactJS hide first child of map function

2 Answers2