How to add quantities from a specific items in React

Question

i have an array like this

const products = [
  { id: 1, name: "Apple", price: 10, img: "apple.jpg" },
  { id: 2, name: "Banana", price: 20, img: "banana.jpg" },
  { id: 3, name: "Cherry", price: 30, img: "cherry.jpg" }
];

const [cartItem, setCartItem] = usestate([])

const [quantity, setQuantity] = useState(1)

    const handleAdd = () => {
        setQuantity(quantity + 1)
    }

    const handleReduce = () => {
        setQuantity(quantity - 1)
    }

 <div>
            {cartItem.map((item) => {
                return(
                    <div>
                        <button onClick={()=>handleAdd()}>ADD</button>
                        <img src={item.IMG} alt="" />
                        <h3 className="name">{item.product}</h3>
                        <p className="price">{item.price}</p>
                        <p className="quantity">{quantity}</p>
                        <button onClick={()=>handleReduce()}>REMOVE</button>
                    </div>
                )
            })}
        </div>

when i add the object from products array to cartItem, and rendered it, i've got a few elements from the cartItem. I want to know how to add and reduce the quantity from the specific items

import { useState } from "react";
import products from "./src/components/products";

const Cart = () => {

const [cartItem, setCartItem] = usestate([])

*The cartItem was a context*


    const [quantity, setQuantity] = useState(1)

    const handleAdd = () => {
        setQuantity(quantity + 1)
    }

    const handleReduce = () => {
        setQuantity(quantity - 1)
    }

  return(
    <>
        <div>
            {cartItem.map((item) => {
                return(
                    <div>
                        <button onClick={()=>handleAdd()}>ADD</button>
                        <img src={item.IMG} alt="" />
                        <h3 className="name">{item.product}</h3>
                        <p className="price">{item.price}</p>
                        <p className="quantity">{quantity}</p>
                        <button onClick={()=>handleReduce()}>REMOVE</button>
                    </div>
                )
            })}
        </div>

    </>
  )
};

export default Cart

i've been trying something like this, but when i click add button, instead of add an specific element it also add a quantity from all the elements

please help, i'm really new to React

Answer 1

If you want to update quantities for specific cart items then you can't use a single quantity state. When an item/product is added to the cartItem array state from the products array you should add a quantity property to each item/product object that can be modified individually.

Example item in cartItem array:

{
  id: 1,
  name: "Apple",
  price: 10,
  img: "apple.jpg",
  quantity: 1, // <-- added quantity property
}

import { useState } from "react";
import products from "./src/components/products";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  const handleAdd = (itemId) => {
    setCartItems(cartItems => cartItems.map(
      item => item.id === itemId
        ? { ...item, quantity: item.quantity + 1 }
        : item
    ));
  };

  const handleReduce = (itemId) => {
    setCartItems(cartItems => cartItems.map(
      item => item.id === itemId
        ? { ...item, quantity: Math.max(1, item.quantity - 1) }
        : item
    ));
  };

  return (
    <div>
      {cartItems.map((item) => (
        <div key={item.id}>
          <button onClick={() => handleAdd(item.id)}>ADD</button>
          <img src={item.IMG} alt="" />
          <h3 className="name">{item.product}</h3>
          <p className="price">{item.price}</p>
          <p className="quantity">
            {item.quantity} {/* <-- specific item's quantity */}
          </p>
          <button onClick={() => handleReduce(item.id)}>REMOVE</button>
        </div>
      ))}
    </div>
  );
};