Update quantity of duplicate product in cart reactjs - reactjs

Question

I have a cart. I'm adding item to cart on click addToCart. However, it adds a duplicates of the same items, and not increasing it's quantity in cart. I also have an incrementCount and decrementCount for updating quantity of added items in cart. I want to make a function which will both add to cart and update the quantity in cart if item is the same
I also have a problem with my increment/decrement - it changes quantity of all added items, not the particular one I clicked. Also I want it to update cartTotal every time I'm clicking on incrementCount/decrementCount.
Here is the sandbox code
https://codesandbox.io/s/epic-night-s575k?file=/src/components/Menu.jsx

Answer 1

You need to have separate state variable count for each product thats in your cart.
You need to have your components like so
Cart component:
import React from "react";
import { FaTimes } from "react-icons/fa";
export default function Cart({
product,
removeFromCart,
count,
incrementCount,
decrementCount
}) {
const { image, title, price } = product;
return (
<>
<li className="cart-item__container">
<img src={image} alt={title} className="cart-item__image" />
<h4 className="cart-item__title">{title}</h4>
<h5 className="cart-item__price">{price}$</h5>
<button disabled={count === 1} onClick={() => decrementCount(product)}>
-
</button>
<span>{count}</span>
<button onClick={() => incrementCount(product)}>+</button>
<FaTimes
className="icon__remove"
onClick={() => removeFromCart(product)}
></FaTimes>
</li>
</>
);
}
Menu component:
import React, { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import { FaShoppingCart } from "react-icons/fa";
import products from "./products";
import Product from "./Product";
import Cart from "./Cart";
const Menu = () => {
const [cart, setCart] = useState([]);
const addToCart = (el) => {
const cartCopy = cart.slice();
const index = cartCopy.findIndex((product) => el.id === product.id);
if (index === -1) {
cartCopy.push({ ...el, count: 1 });
} else {
const pr = cartCopy[index];
cartCopy[index] = { ...pr, count: pr.count + 1 };
}
setCart(cartCopy);
};
const removeFromCart = (el) => {
const cartCopy = cart.filter((product) => el.id !== product.id);
setCart(cartCopy);
};
const decrementCount = (el) => {
const cartCopy = cart.slice();
const index = cartCopy.findIndex((product) => el.id === product.id);
const pr = cartCopy[index];
cartCopy[index] = { ...pr, count: pr.count - 1 };
setCart(cartCopy);
};
const getCartTotal = () => {
return cart.reduce(
(total, product) => total + product.price * product.count,
0
);
};
const getCartCount = () => {
// return cart.length;
// =======OR=========
return cart.reduce((total, product) => total + product.count, 0);
};
return (
<>
<Tabs className="tabs-wrapper" id="menu">
<TabList className="tabs">
<Tab className="tab-item">Burgers</Tab>
<Tab className="tab-item">Lunch of the day</Tab>
<Tab className="tab-item">Crepes</Tab>
</TabList>
<TabPanel>
<div className="burgers">
<ul>
{products
.filter((product) => product.category === "burger")
.map((product) => (
<Product
key={product.id}
product={product}
addToCart={addToCart}
/>
))}
</ul>
</div>
</TabPanel>
<TabPanel>
<div className="lunch">
<h4>Sweet lunch today!</h4>
<span>7$</span>
<p>
You can choose one of our 3 sweet crepes + one of our 4 cold
drinks!
<br />
Nutella crepe, Crepe with salted caramel and nuts or Oreo Bang
crepe with whipped cream and raspberries.
<br />
For drink - one of our homemade lemonades - Melon, Orange or
Lemon-Mint. Or a Frozen Coffee!
</p>
</div>
</TabPanel>
<TabPanel>
<div className="crepes">
<ul>
{products
.filter((product) => product.category === "crepe")
.map((product) => (
<Product
key={product.id}
product={product}
addToCart={addToCart}
/>
))}
</ul>
</div>
</TabPanel>
</Tabs>
<FaShoppingCart className="cart-icon">{getCartCount()}</FaShoppingCart>
{cart.map((el) => (
<Cart
key={el.id}
product={el}
count={el.count}
removeFromCart={removeFromCart}
incrementCount={addToCart}
decrementCount={decrementCount}
/>
))}
<h4 className="cart__total">Your Order Total Price: {getCartTotal()}$</h4>
<button className="btn__clear" onClick={() => setCart([])}>
Clear cart
</button>
</>
);
};
export default Menu;