why is it that there are two children with the same key Im using React and Im trying to make ecommerce website I dont understand the error of double keys

import React, {useEffect} from 'react'
import { Link, useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom' 
import { useDispatch, useSelector } from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, Card} from 'react-bootstrap'
import  Message  from  '../components/Message'
import { addToCart } from '../actions/cartActions'

export default function CartScreen() {
const { id} = useParams()
const { search } = useLocation();
const [searchParams] = useSearchParams();
const dispatch = useDispatch();
 
const productID = id;
const qty = search ? Number(search.split("=")[1]) : 1;

const cart = useSelector(state => state.cart)
const { cartItems} = cart 
console.log('cartItems:', cartItems)

useEffect(() => {
   if(productID) {
      dispatch(addToCart(productID, qty))
   }

}, [dispatch, productID, qty]) 
  
  return (
    <Row>
        <Col md={8}>
                <h1>Shopping Cart</h1>
                {cartItems.length === 0 ? (
                    <Message variant='info'>
                        Your cart is empty <Link to='/'>Go Back</Link>
                    </Message>
                ) : (
           <ListGroup varient='flush'>
            {cartItems.map(item => (
              <ListGroup.Item key= { item.product }>
                <Row>
                  <Col md={2}>
                       <Image src={item.image} alt={item.name} fluid rounded/>
                  </Col>
                  <Col md={3}>
                      <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>

                  <Col md={2}>
                      ${item.price}
                  </Col>
                </Row>
              </ListGroup.Item>
              ))}
           </ListGroup>
          )}
      </Col>

      <Col md={4}> 
      
      </Col>
    </Row>
  )
}

Im trying to load up the cart images in the CartScreen and its telling me that there are two children with same key

CodePudding user response：

In React while using the following

<ListGroup.Item key= { uniqueID }>

Every key value has to be unique such that it can identify each item in the list uniquely.

More help from this thread.

CodePudding user response：

key is not unique for the elements rendered, React found two elements with same key. Could you please try modifying the map JSX inside map.

 <ListGroup varient='flush'>
            {cartItems.map((item, index) => (
              <ListGroup.Item key= { `${item.product}i${index}` }>
                <Row>
                  <Col md={2}>
                       <Image src={item.image} alt={item.name} fluid rounded/>
                  </Col>
                  <Col md={3}>
                      <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>

                  <Col md={2}>
                      ${item.price}
                  </Col>
                </Row>
              </ListGroup.Item>
              ))}
           </ListGroup>