I'm getting this error in my console where it says "Each child in a list should have a unique "key" prop." don't understand how to solve it
This is my the image of the error I'm getting in my console
This Is the code i write for products component
const Products = ({ cat, filters, sort }) => {
const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);
useEffect(() => {
const getProducts = async () => {
try {
const res = await axios.get(
cat
? `http://localhost:5000/api/products?category=${cat}`
: "http://localhost:5000/api/products"
);
setProducts(res.data);
} catch (err) {}
};
getProducts();
}, [cat]);
useEffect(() => {
cat &&
setFilteredProducts(
products.filter((item) =>
Object.entries(filters).every(([key, value]) =>
item[key].includes(value)
)
)
);
}, [products, cat, filters]);
useEffect(() => {
if (sort === "newest") {
setFilteredProducts((prev) =>
[...prev].sort((a, b) => a.createdAt - b.createdAt)
);
} else if (sort === "asc") {
setFilteredProducts((prev) =>
[...prev].sort((a, b) => a.price - b.price)
);
} else {
setFilteredProducts((prev) =>
[...prev].sort((a, b) => b.price - a.price)
);
}
}, [sort]);
return (
<Container>
{cat
? filteredProducts.map((item) => <Product item={item} key={item.id} />)
: products
.slice(0, 8)
.map((item) => <Product item={item} key={item.id} />)}
</Container>
);
};
This is the code i write for product component
const Product = ({ item }) => {
return (
<Container>
<Circle />
<Image src={item.img} />
<Info>
<Icon>
<ShoppingCartOutlined />
</Icon>
<Icon>
<Link to={`/product/${item._id}`}>
<SearchOutlined />
</Link>
</Icon>
<Icon>
<FavoriteBorderOutlined />
</Icon>
</Info>
</Container>
);
};
