React Error: Each child in a list should have a unique "key" prop whilst mapping-CodePudding

I am getting the following error:

react Each child in a list should have a unique "key" prop.

Parent component:

{data.products
            .slice(4, 9)
            .map(
              ({
                onSale,
                slug,
                imageMain,
                productHeadline,
                outOfStock,
                onSalePrice,
              }) => (
                <>
                  {onSale === true ? (
                    <HomeFeatured
                      slug={slug}
                      imageMain={imageMain}
                      productHeadline={productHeadline}
                      onSalePrice={onSalePrice}
                      outOfStock={outOfStock}
                    />
                  ) : (
                    <></>
                  )}
                </>
              )
            )}

Child component:


function HomeFeatured({
  slug,
  imageMain,
  productHeadline,
  onSalePrice,
  outOfStock,
}) {
  return (
    <div key={slug} className="xl:w-72 lg:w-48 xs:w-60  transition ease-in-out delay-110  hover:-translate-y-1 hover:scale-105 duration-200 ">
      <div className="rounded overflow-hidden shadow-lg">
        
      </div>
    </div>
  );
}

I have added a key to the parent div but I am still getting the error in the console. I even added a key to the parent component and still would not work. I have done very similar array mapping in other parts of my application but this part has been componentised. Is this the reason why it may not be rendering possibly??

I feel like I have added the key and React is just being picky but I still would like to solve this issue.

CodePudding user response：

In react you can simplify the one-line ternary statement likewise:

{onSale && (
  <HomeFeatured
    slug={slug}
    key={slug}
    imageMain={imageMain}
    productHeadline={productHeadline}
    onSalePrice={onSalePrice}
    outOfStock={outOfStock}
  />
)}

This eliminates the empty <></> problem.

The map function gives unique id along with the element every time it iterates through an Array, you can use it as a key.

.map((data, idx) => (
  <HomeFeatured key={idx}/>
))

CodePudding user response：

You Should add the key in the parent component. React needs the key on the element you returning in the map function. It can be a component or JSX.

{data.products
        .slice(4, 9)
        .map(
          ({
            onSale,
            slug,
            imageMain,
            productHeadline,
            outOfStock,
            onSalePrice,
          }) => (
            <>
              {onSale === true ? (
                <HomeFeatured
                      slug={slug}
                      key={slug}
                      imageMain={imageMain}
                      productHeadline={productHeadline}
                      onSalePrice={onSalePrice}
                      outOfStock={outOfStock}
                    />
                  ) : (
                    <></>
                  )}
                </>
              )
            )}

CodePudding user response：

You have to assign key value not inside the function. But where it is referenced. Like :

{data.products
        .slice(4, 9)
        .map(
          ({
            onSale,
            slug,
            imageMain,
            productHeadline,
            outOfStock,
            onSalePrice,
          }) => (
            <>
              {onSale === true ? (
                <HomeFeatured
                  key={slug}
                  slug={slug}
                  imageMain={imageMain}
                  productHeadline={productHeadline}
                  onSalePrice={onSalePrice}
                  outOfStock={outOfStock}
                />
              ) : (
                <div key={slug}></div>
              )}
            </>
          )
        )}

CodePudding user response：

The key property should be put on the outer most element you are mapping, it doesnt matter that in this case it's a component, it should get a key prop.