Original subtitles

So for outputting cart items,

we of course need to go to the cart component

and there we again need to use context now.

So we should import, useContext from React

and of course imports the context object

Cart Context from going up to the store folder

and then cart dash context,

and then in the cart components

we now call useContext and pass cart Context to it

to get access to that cart Context.

Now here, we no longer want this dummy array of cart items,

instead now here we can access cart Ctx dot items

to transform these items to items in the cart.

And before we continue working on the cart logic

or anything like that, let's actually work

on these cart items that they have to correct look

and let's always make sure we outputs

the total amount and so on.

And I'll start with the total amount actually.

For dad here, I'll add a total amount constant

and then I'll simply access cart Ctx dot total amount,

however I'll call to fixed two here

to make sure that we always have two decimal places

and I'll put this into a template literal

to output a dollar sign in front of this now dynamically

injected and derived Java Script expression.

And that's not a total amount which should be output here

instead of just hard coded value like this.

So that's now the real total amount for this cart.

I know also wanna make sure

that this order button is only showing up

if we have items in the cart.

So for dad, we can add a number of constants here

right below total amount maybe which will name has items

and here I'll simply check

if cart context items has a length greater than zero.

So if there are items in the cart

and now we can use has items down there to check

if has items is true and only rendered a button

if that's the case.

And with that already, if I reload

you see if I opened the cart with no items

we have no order button and a total amount of zero.

But if you start adding a couple of items, we see them here

we see the update a total amount

and we've got an order button.

Now at the moment

items are still added incorrectly to the cart.

We're going to work on that soon.

But before we do that, I wanna work

on how these cart items are being displayed.

Now for dad, I prepared a component

for you attached to find a cart item file, which contains

both a cart item JS file and a cart item module CSS file.

Simply copy both files into that cart folder.

That's simply a cart item component,

which is not too fancy

which is why I'm just providing

the finished component to you.

In the end, this will just output price, the amount

and then buttons for adding or removing more

of debt cart item and in cart JS

we can now use that cart item.

So here you can simply import cart item

from that just added cart item file, and then render instead

of that list item here, a cart item,

whoops cart item like this, and two cart item.

We now need to pass a key, of course since it's a list

and that can be, or should be item dot ID.

We also wanna display the name.

So that's item dot name.

We wanna display the amount, which is item dot amount

and pass the price, which is item dot price.

And then also pass functions

for adding or removing items from the cart.

So I will add these functions here now

and add my cart item, remove handler

where I get to the idea of the to be removed item

and my cart item add handler where I get the item itself.

And we'll add the logic to dysfunctions in a second.

And now here on the cart item, which we output in the list

we should add up on remove prop coz that's

the name I'm expecting in that provided component.

And two on remove, we pass a pointer to cart item

remove handler, and we add on add prop and number

prop I'm using indebt provided cart item component

where we point at the cart item, add handler.

Now on both these functions

you should call bind and bind no item ID.

This ensures that the idea of the to be added

or removed item is passed here to remove handler

and on end you should also call bind

and bind null and pass the overall item.

You'll learn that bind pre-configure

as a function for future execution

and basically allows you to pre-configure the argument

that function will receive when it's being executed.

And that's something we need here to ensure

that both these functions do receive the ID

or the item respectively.

Now with that, your cart should look something like this

here I'm assumed in which is why it's a bit cut off.

It should look something like this now to make sure

that this has never cut off

I'll all the quickly go to the cart module CSS file.

And here I'll go to cart items

and give us a max height of let's say 20 rem

and then add overflow scroll.

By doing this, I make sure that this can't get too big

but that instead it becomes scrollable

but your cart should now look like this.

And of course, the problem we have here is not just

that these buttons won't work, but that, for example, here

we also have sushi free times

which is absolutely not what we want here.

I also want to go to cart item

and quickly make sure that on the price here for props price

in the cart item component, I also call to fixed to,

to force this to all these have two decimal places

for example, here for addition it's now.

So now as a next step, I wanna make sure

that the logic for adding items to the cart is different.

And if we add sushi a second or third time

it's aggregated together into one item

where this amount changes instead

of more items being added to disarray.