How can I do in React so that once a product is added to the cart if that product has already been added before it does not repeat a new object?

Question

[ I need to avoid the duplication of an object that has already been added to the cart, so that once I add it again, I only add the quantity property of the previous object, which would be the same ]

[CartContext.js]

import React, { createContext, useState } from "react";

export const CarritoContext = createContext();

export default function CartContext({ children }) {
  const [addToCarrito, setAddToCarrito] = useState([]);

[This is the function that I cannot modify so that it complies with a certain rule of not adding duplicates of an object that has already been added to the cart, only increasing its quantity of the already added object]

  function addItem(item, quantity) {
    setAddToCarrito(
      addToCarrito.filter((elemento, pos) => {
        if (elemento.item.id === item.id) {
          addToCarrito[pos].quantity += quantity;
          return false;
        }
        return true;
      })
    );

    if (quantity === 0) {
      setAddToCarrito([...addToCarrito]);
    } else {
      setAddToCarrito([...addToCarrito, { item, quantity }]);
    }
  }

  function clear() {
    setAddToCarrito([]);
  }

  function removeItem(itemId) {
    const newItems = addToCarrito.filter((item) => item.item.id !== itemId);
    setAddToCarrito(newItems);
  }

  console.log(addToCarrito);

  return (
    <>
      
        {children}
      
    
  );
}

[ItemAside.js]

import React, { useState, useContext } from "react";
import { Link } from "react-router-dom";
import ItemCount from "../ItemCount/ItemCount";
import { CarritoContext } from "../../context/CartContext";

const ItemAside = ({ jackets }) => {
  const [quantityCarro, setQuantityCarro] = useState(0);
  const [branded] = useState(jackets.brand);

  let { addToCarrito } = useContext(CarritoContext);
  let { setAddToCarrito } = useContext(CarritoContext);
  let { clear } = useContext(CarritoContext);
  let { addItem } = useContext(CarritoContext);
  let { removeItem } = useContext(CarritoContext);

  const onAdd = (cantidadCarro) => {
    setQuantityCarro(cantidadCarro);
    setAddToCarrito([
      ...addToCarrito,
      { item: jackets, quantity: cantidadCarro }
    ]);
    addItem(jackets, cantidadCarro);
  };

  return (
    
      
        
          
            ${jackets.price}
          
          
            and FREE Returns
          
          
            
              Delivery for $39.99
            
            
              between 17 - 30 April
            
          
          
            
               Deliver to Argentina
            
          

          
            {quantityCarro ? (
              <>
                
                  
                
                Limpiar carro 
                

                

                 removeItem(jackets.id)}>
                  {`Quitar ${jackets.name} de el carro`}
                
              
            ) : (
              
            )}
          

          
            
              
                
                  
                    
                  
                  
                  
                    Secure transaction
                  
                
              
            
          
          
            
              Shipping from
              Sold by
            
            
              Carvel
              Carvel
            
          
          
            
              
              
                 Add a gift ticket to facilitate returns
              
            
          
        
      
    
  );
};

export default ItemAside;

user_3815605 · Answer

I think filter is not the correct function to use. Filter needs to filter object. You are trying to mutate them as well inside. The filter function is immutable which means that it generates a new array instead of an old one.

     addToCarrito.filter((elemento, pos) => {
        if (elemento.item.id === item.id) {
          addToCarrito[pos].quantity += quantity; // <- mutating prev value(bad)
          return false;
        }
        return true;
      })

For this task is better to use an object, rather than an array. That will simplify a lot your code.

      const [products, setProducts] = useState({})
    
      const addProduct = (item, quantity) => {
        // if product already in the object - take it, otherwise add new with 0 quatity
        const newProduct = { ...(product[item.id] ?? {...item, quantity: 0}) }
        newProduct.quantity += 1
        setProducts(products => ({
          …products,
          [item.id]: newProduct
         }) 
        })
      }
    
      // here the array of your products, f.e. for iteration
      const productList = React.useMemo(() => Object.values(products), [products])

How can I do in React so that once a product is added to the cart if that product has already been added before it does not repeat a new object?

1 Answers