All language subtitles for 013 Using the Context_en

So let's start using our context.

For this in this function component

we use the use context React hook from React

as you learned.

And we use it here in the Header Cart Button for a start.

Now we will also need to import the context itself.

So we need to import cart context,

not the cart provider but the cart context object

from going up, going up store cart context.

We don't need the provider component

but really the context itself.

And then we can call use context

and pass this cart context to it.

To get access to this cart context

which is managed by the closest provider

which is this cart provider used in the app component

inside of the Header Cart Button.

And we simply can store this axis,

this object, this context object in a cart Ctx constant

but this name is up to you, of course.

Now by using use context here,

the header cart button component will be a re evaluated

by react whenever the context changes.

And it of course changes when we do update it

in the cart provider a component.

So now we established this connection

and we can now use this to output our number of cart items.

For this we can add another constant here.

Number of cart items sounds like a descriptive name

and here we want to get access to cart context dot items.

And you could no think that you simply use the length

of that array to get the number of cart items.

This could work depending on how you write your cart logic

but I don't want to add every item

as a new entry in that list.

Instead if we add, let's say three pieces of sushi

I want to add one item to the cart items array

but set the amount for that item to free.

So then the length would be wrong

because it's just one item and the cart items array

but there are actually free meals inside of it

simply because inside of our cart items

array will have objects where

for every kind of meal we stored

the amount of meals of that type is part of the cart.

So therefore the proper way to derive

that number of items is to axis cart items.

So cart contexts on items,

but then use the reduced method on that

reduces a built in method in the end

that is a method which allows us to transform an array

of data into a single value

into a single number in this case.

For data takes two arguments.

The first argument is a function

which will be called for you.

The second argument is a starting value

and you'll see why it's a starting value in a second.

Here we use CRO, this function which has passed

and as a first argument then receives two arguments itself

automatically by JavaScript

which is calling that function

for every item in that array on what you're calling reduce.

That's the current number.

However you want to name it.

And then the item at which it's currently having a look

and current number will be different

for every item it's calling it.

Item will also be different,

but this is basically a number of value

which has carried on across executions.

Initially it's CRO,

but then after the first time disfunction has been executed

it will be the result which you returned

in that previous execution.

And here I want to return current number

plus item dot amount because my cart items objects

will have an amount field

which stores the number of items per item type.

And this will now reduce this array to a single number.

And it's this number of cart items

which will be output down there.

Now, if we saved as we see CRO here

in our or on our cart button,

therefore as a next step

let's make sure we can actually add cart items.