Tengo estos productos con variaciones de producto de colores. El problema es que no graba el color del producto que he añadido. Por ejemplo, la camiseta tiene 2 colores, rojo y verde, y elegiré el rojo, solo se guardará el rojo y se actualizará la cantidad para ese producto en su conjunto, pero no en el color.

Esto es lo que pasa:

Códigos y caja: https://codesandbox.io/s/add-to-cart-jsd9fd?file=/src/App.js:0-2599

Códigos:

 export default function App() { const [cartItems, setCartItems] = useState([]); const handleAdd = (id, name, size, cat, color) => { console.log("add", id, name, size, cat, color); const productExist = cartItems.find((item) => item.id === id); if (productExist) { setCartItems( cartItems.map((item) => item.id === id ? { ...productExist, quantity: productExist.quantity + 1 } : item ) ); } else { setCartItems([...cartItems, { id, name, size, cat, color, quantity: 1 }]); } }; // const handleAdd = (item) => { // console.log("add", item); // }; console.log(cartItems); return ( <div className="App"> {products.map((index) => ( <ul key={index.id}> <li> <b>{index.prodName}</b> </li> <li>Category: {index.cat}</li> <li>Size: {index.size}</li> {Object.entries(index.colorMap).map((color) => ( <> {color[1] !== 0 ? ( <> {color[0]} <button onClick={(e) => handleAdd( index.id, index.prodName, index.size, index.cat, color[0] ) } > Add to Cart </button> {/* <button onClick={(e) => handleAdd(index)}>Add to Cart</button> */} </> ) : ( <>2</> )} <br /> </> ))} Php {index.price}.00 </ul> ))} <Cart cartItems={cartItems} /> </div> ); }