score:1

Accepted answer
function Cards(props) {
  const [deck, setDeck] = useState(props.initialDeck)

  const isCardInDeck = (translationKey) => {
    return deck.some(
      (card) => !!card && card.translationKey === translationKey
    );
  };

  const addToDeck = (card) => {
    if (!isCardInDeck(card.translationKey) && !!card) {
      setDeck([...deck, card])
    }
  };

  const removeFromDeck = (card) => {
    if (isCardInDeck(card.translationKey) && !!card) {
      setDeck(deck.filter(deckItem => deckItem.translationKey !== card.translationKey))
    }
  };

  return (
    <div className="cardsContent">
      <div className="cards">
        {cardList.length > 0 ? (
          cardList.map((item, index) => {
            return (
              <Card key={index} card={item} addToDeckDisabled={isCardInDeck(item.translationKey)} addToDeckClick={addToDeck} removeFromDeckClick={removeFromDeck} />
            );
          })
        ) : (
          <span>
            <FormattedMessage id="app.cards.label.no.card.found" defaultMessage="No card found with filter."/>
          </span>
        )}
      </div>
    </div>
    );
}

Related Query

More Query from same tag