Hello everyone, I am trying to create an add to cart function that takes a product from a page and adds the properties to an array.
My function looks like this
addToCart({ title, desc, price, image }) {
// This is what is returning undefined
this.setState((state) => ({
cart: [
...this.state.cart,
{
title,
desc,
price,
image,
},
console.log(this.state.cart)
],
}));
}
I think that is why it is adding the item twice. I added this trying to figure out why the object was returning undefined. I’ll go ahead and remove that now, that’s one problem fixed!
P.S. Where would I put the console.log() if I wanted it to fire every time the function fired, but not be put inside the cart?
An important thing to know about this.setState is that it basically acts as an asynchronous function. So, you could place the log somewhere within addToCart, but this does not ensure you will be shown the updated this.state.cart. So, you might want to add the log within the render method of the component, to see it each time the component updates.
Also, you should probably use the following, since you are not making use of the state object passed to the callback.:
So my second issue is fixed, and I put the console.log() in the right place. Thank you for that!
So I removed the “this.state.items” onClick={e => this.handleAddToCart(e, this.state.items) from this and it gave me a useful error message.
"
TypeError: Cannot destructure property ‘title’ of ‘undefined’ as it is undefined.
"
I am still stuck though as to why the function is not grabbing the data it is suppose to though.