I don't quite understand this function, like what do you filter out and the way it work...can anybody help me to expalin this? I'm a begginer and i need your help! Thank you so much btw!
Function:
removeFromCart =(product) => {
const cartItems = this.state.cartItems.slice()
this.setState({
cartItems: cartItems.filter((x)=>x.id!==product.id)
})
}
Array.prototype.filter expects a callback that returns a boolean.
If the callback returns true, the element gets pushed to the new array and if it returns false, the element will not be pushed.
const cartItems = this.state.cartItems.slice() creates a new array and can be removed as filter creates a new array anyway.
cartItems.filter((x)=>x.id!==product.id)
If we consider the above snippet, the returned value is x.id!==product.id because if the id matches, x.id !== product.id will evaluate to false and returning false will remove the product.
Update:
You also seem to have an issue with passing the product to the function. Fixed that and here's the updated sandbox:
<button className="button" onClick={() => props.removeFromCart(item)}>
Remove
</button>
This is the longer version of that code, you might get confused because your version has a lot of shortcuts and bad variable name. (comments)
removeFromCart = (product) => {
const cartItems = this.state.cartItems.filter((item) => {
return item.id !== product.id;
});
this.setState({
cartItems: t
})
}
let's know this:
const cartItems = this.state.cartItems.slice()
First, you don't need this one as filter already returns a new array
usually you use slice to create a copy (portion) of that array (usually we pass arguments on it and I've rarely seen a usage where the dev uses it as a "clone" function. You can read more about it here.
const cartItems = this.state.cartItems.filter((item) => {
return item.id !== product.id;
});
for this one, I renamed your variable x into item to make it more understandable. Since cartItems is an array, this function will go through each items then create a new array where the item id is not the same as product id (return item.id !== product.id). Read more about filters here
this.setState({
cartItems
})
you pass the newly created cartItems to update your state.
In you code the Array.prototype.slice function is use to create a copy of the state cartItems which is an array. the Array.prototype.filter function is use to filter the array and return only item which match the condition which is test in the callback function passed to the filter function.
Precisely you are setting the cartItems array to be equal to an array which contains only item which id is different than the id of the product pass as argument of the removeFromCart function.