I have an cart object. I want to change the qty of a product in cart for which i have created a changeQty method inside which I am using filter method to find the respective product and then I am updating the qty.
If I pass other than 0 it works properly. But if I pass 0 as quantity to the changeQty method the product get's removed from the cart.
According to my knowledge filter works based on the return value. But here I am assigning qty to product.qty. And also If I use map instead of filter I am geting 0 in place of that product. So my doubt is what does product.qty = qty returns ?
let cart = [{
id: 1,
title: "Product 1",
qty: 1
},
{
id: 2,
title: "Product 2",
qty: 1
},
]
const changeQty = (pid, qty) => {
cart = cart.filter(product => product.id === pid ? product.qty = qty : product)
console.log(cart);
}
changeQty(1, 0)Use map instead of filter. You can use spread syntax and overwrite the value of qty for the product that matches the id.
let cart = [{
id: 1,
title: "Product 1",
qty: 1
},
{
id: 2,
title: "Product 2",
qty: 1
},
]
const changeQty = (pid, qty) => {
cart = cart.map(product => product.id === pid ? { ...product, qty } : product)
console.log(cart);
}
changeQty(1, 0)if I pass 0 as quantity to the changeQty method the product get's removed from the cart.
That's because the assignment of 0 to product.qty evaluates to a 0 return value for the filter callback. That is a falsy value, indicating the current cart item should be filtered out. In fact, you don't want to filter at all. On the contrary, you don't want to change the length of the cart array.
If your goal is to mutate the cart structure, then possibly you are looking for find instead of filter:
const cart = [{id:1,title:"Product 1",qty:1},{id:2,title:"Product 2",qty:1}];
const changeQty = (pid, qty) => {
Object(cart.find(({id}) => id === pid)).qty = qty;
console.log(cart);
}
changeQty(1, 0);NB: the call to Object is to deal silently with a product that is not in the cart.
You are modifying the source object which is very bad:
let cart = [{
id: 1,
title: "Product 1",
qty: 1
},
{
id: 2,
title: "Product 2",
qty: 1
},
]
const changeQty = (pid, qty) => {
cart.forEach(product => product.id === pid ? product.qty = qty : product)
console.log(cart);
}
changeQty(1, 0)That's why you are getting unexpected results