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

[leonogas]

I'm having this issue, normally the solution is very easy but in this case it seems to be related to this library. 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>`

SwiperCard.js `

</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) => ( <>

{" "} {/* Use key on Link component */}

</>

));

return ( <> <Carousel key={Math.random()} transitionDuration={400} autoPlay={true} infinite={true} autoPlaySpeed={5000} responsive={responsive}

{product} </> ); } `

and the product.js `"use client";

import React from "react";

export default function Product(props) { 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} <p className="price" key={item.id + "p1"}> {props.price}

<p key={item.id + "p2"}>{props.description}

<p key={item.id + "p3"}> <button key={item.id + "button"}>Go for it

); } `

[leonogas]

the issue was the <></>, I should use the react.fragment at the top with the key I was using.