I see this warning in console. But where is my mistake? I have Warning: Each child in a list should have a unique "key" prop. but I put the KEY PROP in all components what I render with map function.

One warning in this map function:

{data && data.map(item => (
              <Card key={item.id}>
                <CardTitle>{item.title}</CardTitle>
                <CardPrice>{item.price}</CardPrice>
                <CardDescription>{item.description}</CardDescription>

                <CardItems>

                  {item.benefits.map(benefitsItem => (
                    <CardItem>
                      <CheckCircleIcon />
                      <CardItemText>{benefitsItem}</CardItemText>
                    </CardItem>
                  ))}
                  
                </CardItems>
                
                <StyledPopup
                    trigger={<CardButton className="BlackButton">Замовити сайт</CardButton>}
                    modal
                    nested
                    lockScroll
                >
                {close => (
                    <div className='modal'>
                        <button className="closeModal" onClick={close}>&times;</button>
                        <Feedback
                          isPlan={{
                            name: item.title,
                            description: item.description,
                            price: item.price
                          }}
                        />
                    </div>
                )}
                </StyledPopup>
                
              </Card>
            ))}

And Other warning in this component:

<Navigation>
   {cards && cards.map(item => renderLinks(item))}
</Navigation>

<CardsWrapper>
   {cards && cards.map(item => renderCard(item))}
</CardsWrapper>

There is the render functions.

const renderCard = (cardData) => {
        
        if(cardData.cardId === activeCard){
            return(
                <Card key={cardData.cardId}>
                    <ImageWrapper>
                        <Image src={cardData.cardImage} />
                    </ImageWrapper>

                    <CardInfoWrapper>
                        <CardTitle>{cardData.cardTitle}</CardTitle>

                        <CardDescription>
                            {cardData.cardDescription}
                        </CardDescription>

                        <Pluses>

                            {cardData.cardOpportunities && cardData.cardOpportunities.map(opportunity => (
                                <Plus>
                                    <Ok><CheckCircleIcon /></Ok>
                                    {opportunity}
                                </Plus>
                            ))}

                        </Pluses>
                    </CardInfoWrapper>
                </Card>
            )
        }
    }

And finnely

const renderLinks = (cardData) => {

        if(cardData.cardId === activeCard) {
            return(
                <div key={cardData.cardId}>
                    <NavigationItem
                        className="navigationLink"
                        width={cardData.cardLinkWidth}
                        active
                    >
                        {cardData.cardLink}
                    </NavigationItem>
                </div>
            )
        } else {
            return(
                <div key={cardData.cardId}>
                    <NavigationItem
                        className="navigationLink" 
                         width={cardData.cardLinkWidth}
                        onClick={() => linkClickHandler(cardData.cardId)}
                    >{cardData.cardLink}</NavigationItem>
                </div>
            )
        }
    }

CodePudding user response：

Looks like there's a missing key prop on line 10 at

{item.benefits.map(benefitsItem => (
  <CardItem>

CardItem needs a key prop.

CodePudding user response：

Each CardItem within the Card also needs it's own key as there are multiple CardItem components mapped from the benefits array. i.e <CardItem key={benefitsItem.id}/>