I'm experiencing an issue that is proving to be more challenging than usual, as it appears to be related to a specific library. I understand that using a key from a file is not ideal, but the plan is for it to come from a database in the future.
Library: import Carousel from "react-multi-carousel";
Warning: Each child in a list should have a unique "key" prop.
To resolve this issue, check the top-level render call using . For further information, visit https://reactjs.org/link/warning-keys. 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 am currently utilizing data.js for testing purposes only. Can anyone pinpoint where the issue lies? All items have unique identifiers.
data.js
export const responsive = {
superLargeDesktop: {
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..",
},
];Here's the basic 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 assistance would be greatly appreciated. Thank you!