I filter the categories from my allProducts array, which I retrieve from the database via redux-toolkit. Then I slice the array for the pagination and map over it. I get the warning:
Each child in a list should have a unique "key" prop.
I am using the _id from MongoDb as key, which is unique. It works in the Link to switch to the single product page.
I tried to use the index as key, I tried to wrap the mapping into: React.Children.toArray() and I installed react-uuid and used it like this:<FieldWrapper key={uuid()}>. But the warning is still in all of my product-lists. Code:
const dispatch = useAppDispatch(); const allProducts = useAppSelector((state)=>state.products.allProducts); useEffect(()=>{ dispatch(getAllProducts()) },[dispatch]) const productsChild = allProducts.filter((item:any)=>{ return item.categories[0] === "Child"; }) const [currentPage, setCurrentPage] = useState(1); const [productPerPage] = useState(12); const lastIndex = currentPage * productPerPage; const firstIndex = lastIndex - productPerPage; const currentProducts = productsChild.slice(firstIndex, lastIndex); return ( <Container> <ProductsWrapper> {currentProducts.map((item:any)=>( <FieldWrapper key={item._id}> <Link to={`/showProduct/${item._id}`} className="link" style={{color:"var(--fontColor)", width:"100%", cursor:"pointer"}}> <ImgHolder> <img src={item.image} alt={item.categories} title={item.title}/> </ImgHolder> <DescHolder> <h4>{item.title}</h4> <p>{item.producer}</p> <span>{item.price}{item.currency}</span> <ColorHolder> {item.colors.map((color:any)=>( <div style={{backgroundColor:color}}></div> ))} </ColorHolder> </DescHolder> </Link> </FieldWrapper> ))} </ProductsWrapper> 
