How to Map Cart Product Data into Cart Product Component Instances
All right welcome back. That was a long video but we got a lot set up so we can throw these into our products, our cart products and get things going really well.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So let's go ahead and let's go into our cartProduct.js, and real quick we need to take in a couple of things okay. We need to take in the... well here's the thing we need to go into shopCart.js and we need to take in to here the products, right. And then what we need to do is throw the entire product into here(our key) and the way we can do that in cartProduct is by putting in some braces and saying ...product okay.

shopCart.js

/* function CartContent({className, products}) {
       let count = products, length;
       let productsJSX = products.map(product => <CartProduct */ {...product} /* key={product._id}/>); */

Now what this is going to do is it's basically just going to say the amount or quantity is equal to product quantity, right. Then it's going to say product is equal to product.product like the actual product that we're referencing okay. All right let's go into shopProduct.js and we need to think of this differently okay, because we're not taking in the title description of price, we're taking in the cart product.

So lets say id and then we want to basically take this from the actual product, so let's call it actualProduct and then what we need to do is say constant id because the product has an id and the cartProduct also has an id.

Let me show you what that means again. So in user.js, you see how the payload, each object contains an id and then each product contains an id as well.

large

So we're taking out the id, product, and quantity and then in the product we're taking out all these things except for belongsTo. Okay so in here we need to take out the product and we need to take out the quantity and then we need to say is equal to this.props because that's the product and then we're going to say okay well we want the id, title, description, and price out of the product with in the cartProduct, okay.

So this is going to be the actual product which is again this right here this product is the actual product.

large

Okay, so I don't know a better way to explain it, but that's how it's working.

Now what we need to do is we need to pass into quantity the actual quantity not just 1, we need to say quantity and take that from wherever it went right. We need to take in the actual quantity okay, whatever you understand, you should understand at this point. All right, so let's go see what happens let's go into our browser and we have an error.

large

It's saying why do you have two is? Duplicate declaration id. So really what we need to do is go into vs code and see what we're doing, because reusing this id right, it thinks that we're using this id but we're not. And the thing is we don't even need these id's in here so let's just get rid of them.

I hope it made sense why I was pulling those out, I hope it cleared up how this was working at least a little bit since they both had IDs, we don't need them though okay. So let's go and go into Chrome and see what happens. Okay, looks like nothing's working, okay wonderful just kidding, but let's reload the page and see if it pulls it in. All right, so it's not pulling it in correctly. So we need a check our redux dev tools, we have the items so that's got to be working.

But for some reason we're not getting what we want. So let's go ahead and just say console.log this.props and see what we're getting into these components. Oh my gosh, the problem here, there is a huge problem here it's that we're in shopProduct we're not in cartProduct. So we really shouldn't be messing around with this, so what I'm going to do is I'm going to copy these three lines and let's just hit command + z until we're left with what we had at the beginning of this video.

So save that. All right just make sure your shopProduct looks like this okay. Now let's head over to cartProduct and this is where we want to do this okay. So paste this over, now we can use what we're trying to do here, we don't need the description, we just need the title, price, and the quantity. Okay, so I hope that makes sense if it doesn't just work through it, pause the video if you need to eventually it will make sense.

And it's good that you actually go through it and understand how this is working. All right now let's try it, okay it says className is not defined. The reason that's happening is because we're trying to use className in cartProducts here, I don't think we even applied one but let's just take it out anyway so we can make things not confusing.

Okay, let's go back into Chrome you'll see now that we're pulling it in, we have 1.99 and then we have 2 and then 1. Now we didn't style this to actually be white so let's just go fix that so you can see that. But the point is we're getting our data into each one of these products properly and that's exactly what we want.

So in the next video what we're going to do is we're going to finish styling this product and then we are going to learn how to increment and decrement the amount of products here. So I'll see you in the next video, let's go ahead and commit our code.

Terminal

git status
git add .
git commit -m "mapped cartproducts into cart product component instances"

I'll see you in the next video.

Resources

Source code