React not accepts _id as unique key-CodePudding

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>

CodePudding user response：

Error might be coming from this code.

<ColorHolder>
 {item.colors.map((color:any)=>(
    <div style={{backgroundColor:color}}></div>
 ))}
</ColorHolder>

You also have to add a unique key here.

Thanks