Need to add quantity on my react state object - reactjs

Question

I am stuck with a problem where I am updating React state with an array of objects where my original object is like this.
[{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"}];
Suppose this is an e-commerce cart list, where now if I add the same product again, being 'id' property as unique for each product it should increase the quantity of that product.
I need this [[{id:"123", name:"Product 1 , quantity: 2"}, {id:"456", name:"Product 2"}];]
Instead I am getting state like this,
[{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"},{id:"123", name:"Product 1"} ];
I do not want that third item on my array, I want it to increase the quantity property which is also not available on the object before.
I am using React hooks on this
Please do help. Thanks in advance.

Answer 1

You need to find the index of the item inside the cart array based on the id and then update the quantity, or set it to 1 as initial value.
I added a small sample but you can adapt it to hooks code.
let cart = [{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"}];
let newCart = JSON.parse(JSON.stringify(cart))
let index = newCart.findIndex(obj => obj.id === "123")
if (index >= 0) {
newCart[index].quantity = (newCart[index].quantity | 0) + 1
}
console.log(newCart)

Answer 2

I tried this after posting the question and it worked.
const addToCart = (productToAdd) => {
const present = cartItem.some((prod) => {
return prod.id === productToAdd.id;
});
if (!present) {
productToAdd["quantity"] = 1;
setcartItem((prev) => {
return [...prev, productToAdd];
});
} else {
setcartItem((prev) => {
prev.map((prod) => {
if (prod.id === productToAdd.id) {
prod.quantity++;
}
});
return [...prev];
});
}
};

Answer 3

Use map() to iterate through existing state and update the object when id matches to the input.
const state = [
{ id: "123", name: "Product 1" },
{ id: "456", name: "Product 2" },
];
setState = (_state) =>
state.map((item) =>
item.id === _state.id
? { ...item, quantity: item["quantity"] + 1 || 2 }
: item
);
const newState = setState({ id: "123", name: "Product 1" });
console.log(newState);