I have a cart with products, when you click on the "Add" button, the product is added to the cart along with the parameters.

My problem is that when I click "Add" again, this product is added and displayed on the screen. That is, there are two identical products in the basket. I need that when the same product is added repeatedly, its quantity increases, but the card was one. enter image description here

const Cart = (props) => {
  const cartItems = useSelector((state) => state.cart.productArr.items);
  return (
    <Card className={classes.cart}>
      <h2>Your Shopping Cart</h2>
      <ul>
        {filteredArr.map((cartItem) => (
          <CartItem
            key={cartItem.id}
            item={{
              title: cartItem.title,
              price: cartItem.price,
              quantity: cartItem.quantity,
            }}
          />
        ))}
      </ul>
    </Card>
  );
};

CodePudding user response：

this code can help you https://codesandbox.io/s/cool-architecture-6x0x8n?file=/src/App.js

import { useState } from "react";

const CartItem = ({ item, onAdd, onSubtract }) => {
  return (
    <li>
      <p>{item.title}</p>
      <p>{item.price}</p>
      <p>{item.quantity}</p>
      <button onClick={() => onSubtract(item.id)} disabled={!item.quantity}>
        {" "}
        -{" "}
      </button>
      <button onClick={() => onAdd(item.id)}>   </button>
    </li>
  );
};

const Cart = ({ cartItems, setCartItems }) => {
  const onAdd = (currentId) => {
    const newItems = cartItems.map((item) => {
      if (item.id === currentId) {
        return { ...item, quantity: item.quantity   1 };
      }
      return item;
    });

    setCartItems(newItems);
  };

  const onSubtract = (currentId) => {
    const newItems = cartItems.map((item) => {
      if (item.id === currentId && item.quantity > 0) {
        return { ...item, quantity: item.quantity - 1 };
      }
      return item;
    });

    setCartItems(newItems);
  };

  return (
    <div>
      <h2>Your Shopping Cart</h2>
      <ul>
        {cartItems.map((cartItem) => (
          <CartItem
            key={cartItem.id}
            item={cartItem}
            onAdd={onAdd}
            onSubtract={onSubtract}
          />
        ))}
      </ul>
    </div>
  );
};

export default function App() {
  const [items, setItems] = useState([
    {
      id: 1,
      title: "Book",
      price: 7,
      quantity: 1
    },
    {
      id: 2,
      title: "pencil",
      price: 9,
      quantity: 0
    }
  ]);

  return (
    <div className="App">
      <Cart cartItems={items} setCartItems={setItems} />
    </div>
  );
}