Update certain property of list of object in react

Question

I want to add the addItem to the cartItems list, but if the id is the same as the item that already in the cartItems, I don't want to add another object, instead it will add the previous amountPrice and orderAmount with the new one.

Is there a way for me to achieve that?

const [cartItems, setCartItems] = useState(cartLocalStorage());

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    const addItem = {
      id: id,
      name: name,
      image: image,
      amountPrice: amountPrice,
      orderAmount: orderAmount,
    };
    setCartItems([...cartItems, addItem]);
  };
};

This part is a little unclear instead it will add the previous amountPrice and orderAmount with the new one. Can you elaborate? — codemonkey
– codemonkey, Commented Mar 4, 2021 at 6:31
so before the new data got stored in the array, first it will check if the id is already there, which means it won't create another object, but change only the other 2 key properties, amountPrice and orderAmount. And it won't overwrite it, but it will add the new value which the sum of the old value + new value — itsMe
– itsMe, Commented Mar 4, 2021 at 7:35

codemonkey · Accepted Answer · 2021-03-04 08:01:02Z

1

Give this a shot:

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    if(cartItems.find(i => i.id === id)){
        setCartItems(cartItems.map(item => {
            if(item.id === id){
                item.amountPrice += amountPrice;
                item.orderAmount += orderAmount;
            }
            return item;
        }));
    }else{
        setCartItems([...cartItems, {id, name, image, amountPrice, orderAmount}]);    
    }
}

addToCart will check if the item is already in cartItems by id and if so, will add the values of amountPrice and orderAmount to the corresponding values of the existing element.

If, however, the id is not in cartItems, it will add a new element to the array.

edited Mar 4, 2021 at 8:01

answered Mar 4, 2021 at 7:53

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

itsMe Over a year ago

thanks it works, but I have a question. Why did you use find() not filter() on this case?

codemonkey Over a year ago

@BaBi I think using find in this context is a bit more intuitive. I could certainly use filter and the result would be the same, but filter tends to be usually used in situations where you need multiple items of an array returned. Since I know there is only one that can match the id, find appeared more appropriate for readability.

itsMe Over a year ago

oh now I understand these concepts, thanks I learned a lot from you.

andriusain · Accepted Answer · 2021-03-04 06:37:22Z

0

I have not tested it and will probably not work but hopefully will set you in the right direction:

const [cartItems, setCartItems] = useState(cartLocalStorage());

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    const addItem = {
        id: id,
        name: name,
        image: image,
        amountPrice: amountPrice,
        orderAmount: orderAmount,
    };
    const index = cartItems.findIndex(item => item.id === id);
    if (index !== -1) {
        cartItems[index] = {...cartItems[index], ...addItem};
        setCartItems(cartItems);
    } else {
        setCartItems([...cartItems, addItem]);
    }
};

Cheers

answered Mar 4, 2021 at 6:37

andriusain

1,20711 silver badges18 bronze badges

Collectives™ on Stack Overflow

Update certain property of list of object in react

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related