Carousel - Warning: Each child in a list should have a unique "key" prop

Question

I'm having this issue, normally the solution is very easy but in this case it seems to be related to this library. I know I shouldn't use a key from a file but later on this will come from DB.

Library: import Carousel from "react-multi-carousel";

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

Check the top-level render call using . See https://reactjs.org/link/warning-keys for more information. at Slideshow2 (webpack-internal:///(ssr)/./app/components/Carroussel/home/Slideshow2.jsx:21:23) at Lazy at div at div at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:240:11) at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71

I'm using the data.js for testing only. Do you know where is the issue? everything has a unique id.

data.js

export const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 1024 },
    items: 5,
    slidesToSlide: 1,
  },
  desktop: {
    breakpoint: { max: 1024, min: 800 },
    items: 4,
  },
  tablet: {
    breakpoint: { max: 800, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
};

export const productData = [
  {
    id: 1,
    imageurl:
      "https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
    name: "Colorful sneakers",
    price: "19.99£",
    description: "Some text about the product..",
  },
];

Basically I've this structure:

page.js

      <div className="px-5">
        <SwiperCard images={indexFiles.frontmatter.images} />
      </div>

SwiperCard.js

    <div className="px-5">
      <Slideshow2 images={images.images}></Slideshow2>
    </div>

Slideshow2.js

"use client";

import "../home/styles.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Product from "../home/Product";
import { productData, responsive } from "../home/data";
import Link from "next/link";

export default function Slideshow2({ images }) {
  const product = productData.map((item) => (
    <>
      <div key={item.id}>
        <Link key={item.id} href={`/${item.id}`}> --> tried this but then I also deleted because I added in the main div
          {" "}
          {/* Use key on Link component */}
          <Product
            key={item.id}  --> same here
            name={item.name}
            url={item.url}
            price={item.price}
            description={item.desc}
          />
        </Link>
      </div>
    </>
  ));

  return (
    <>
      <Carousel
        key={Math.random()} --> also added this for testing, without this didnt work as well.
        transitionDuration={400}
        autoPlay={true} 
        infinite={true}
        autoPlaySpeed={5000}
        responsive={responsive}
      >
        {product}
      </Carousel>
    </>
  );
}

and the product.js

"use client";

import React from "react";

export default function Product(props) {
-- I have added a unique id for each element also for testing.
  return (
    <div className="card" key={props.id + "div"}>
      <img
        key={item.id + "img"}
        className="product--image"
        src={props.url}
        alt="product image"
      />
      <h2 key={item.id + "h2"}>{props.name}</h2>
      <p className="price" key={item.id + "p1"}>
        {props.price}
      </p>
      <p key={item.id + "p2"}>{props.description}</p>
      <p key={item.id + "p3"}>
        <button key={item.id + "button"}>Go for it</button>
      </p>
    </div>
  );
}

Any help would be appreciated. Thanks!

Answer 1

const product = productData.map((item) => (
  <>
    <div key={item.id}>
      <Link key={item.id} href={`/${item.id}`}>
        {" "}
        {/* Use key on Link component */}
        <Product
          key={item.id}

The key needs to be on the outermost element, which in this case is the fragment. You do not need keys on any of the other elements in your example.

The shorthand syntax for fragments <></> doesn't allow keys, so you'll need to use the longhand version:

import React, { Fragment } from 'react';
// ...

const product = productData.map((item) => (
  <Fragment key={item.id}>
    <div>
      <Link href={`/${item.id}`}>
        {" "}
        <Product