Ahora solo puedo agregar productos usando un precio. En db tengo dos precios y colores diferentes. Tiene que funcionar así, el primer precio se aplica al primer color, el segundo precio a todos los demás colores
/src/app.js
const {getData} = require('./db/db'); const products = getData(); const [cartItems, setCartItems] = useState([]); const onAdd = (product) => { const exist = cartItems.find((x) => x.id === product.id); if (exist) { setCartItems( cartItems.map((x) => x.id === product.id ? {...exist, qty: exist.qty + 1} : x ) ); } else { setCartItems([...cartItems, {...product, qty:1}]) } };/src/components/cart.jsx
function Cart({cartItems, onCheckout}) { const totalPrice = cartItems.reduce((a, c) => a + c.price[0] * c.qty, 0); return ( <div className='cart_container'> <br/> <Button title={`${cartItems.length === 0 ? "Cart is empty" : "Cart" + '\n' + "Total Price: " + totalPrice} `} type={"checkout"} disable={cartItems.length === 0 ? true : false} onClick={onCheckout} /> </div> ); }puedes hacerlo de esta manera:
const firstColor = "grey" // for example const totalPrice = cartItems.reduce((a, c) =>{ const price = c.color == firstColor ? c.price[0] : c.price[1] return a + price * c.qty : }, 0);