CODEWITHSUNDEEP
javascriptcssnode.jsreactjs
Leo Policastro
Leo Policastro

Reputation: 1142

ReactJS hide first child of map function

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.

Upvotes: 0

Views: 1867

Answers (2)

Janaka Pushpakumara
Janaka Pushpakumara

Reputation: 5107

You can update existing CSS style to like this,

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

I think this may help you.

Upvotes: 1

k1r4n
k1r4n

Reputation: 157

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

Upvotes: 1

Related Questions