So, after watching React tutorials from Net Ninja, I decided to create my own app where I will apply everything new I learn. I was feeling ambitious and decided to create a template/UI for an online shop.
PS He didn’t finish tutorial series yet, I’m probably going too far here
- At start, I had 3 components. APP, one that handles states for all the content and one for product card that includes product picture and info.
- Then, my next goal was to create a shopping cart. That was trickier but I did manage to add/remove items from a shopping cart and display/hide it on click.
- My next goal was to add quantity for every product but I left that to first block adding the same product again to the cart. That seemed really easy but it didn’t work well.
Then, I discovered this.
NOTE: You will need to see the code in Content-container component, functions are addItem and deleteItem
Now, the thing I noticed is in mentioned functions. I was doing what I learned, creating copies because we cannot mutate the state directly. So, because new stuff I tried to add didn’t work properly, I decided to console.log the copy of state (array) and the state of shopping cart after setState.
Can anyone explain why this happens? Look at the console on screenshot. I was just adding and deleting products.
I believe it has to do something with updating the state but I have no idea what. It works but it doesn’t seem right.
I know that looking and understanding someones code is hard, probably my naming sucks too. I apologize in advance. If you need something else explained, I will try.