All language subtitles for 032 Using Context In Components_en

They should instead be called

from inside some of our other components and pages.

So actually what we wanna do here is

we don't just wanna manage values

which are then accessible by different components,

but also functions that will change those values

that are accessible from different components.

And hence we can expose pointers at these functions

to our different components as well.

So in our context here, we don't just have the values

for our favorites, but we also can add function steer.

We can add add favorite key, for example

which stores are pointer at the add

favorite handler as a value.

So we don't execute the function here

we point at it, and that exposes

this function defined in this component

to all components in this application that are interested.

And you will see how to use this context

in our components in just a second.

And we can therefore also add,

remove favorite here and point at

the remove favorite handler

and add the item is favorite key

and point at the item is favorite handler function.

And now we expose these functions

to all interested components as well.

Now that that's the case, I will also go

to my initial context and add those keys here as well

and set that to empty functions

that just gets the correct parameters

and I'm only doing this because that

will actually give us better auto completion later.

It doesn't really do anything here

since these are functions that don't do anything

but it will help us with

auto-completion in the IDE later.

And that's why we'll just add them here

to the initial context as well.

Okay, so now with that, we spent a lot

of time in that file and I could imagine

that it's not all 100% clear yet

but we're now done with working in this file.

Now we need to wrap our context provider around

all the components that want to interact with this context.

And then in the different components

we need to pull out the values we're interested in

or call the methods, the functions here we defined.

And for that we need to export

this favorites context for wider component here

by adding the export keyword in front of this function

and also maybe at the bottom of the file export

the context as itself, the favorites context itself

as a default.

So we have two exports this function here,

which we export by its name, and then

this default export, which is

our favorites context itself.

These two things are exported here

because we need to interact with both objects,

with both things from outside this file.

Now let's start with interacting

with this favorites context provider component.

I mentioned multiple times that

we wanna wrap this component around

all the components that are interested

in our context data.

And in this case, the my favorites page

will be interested, the navigation bar will be interested

since I wanna show a batch here

and the all meetups page will also be interested

or to be precise, the meetup item components

will be interested because there I have

this two favorites button which for example,

should trigger the add favorite handler.

So I have various components from all

over the app that are interested

and hence the easiest way of providing

the context is probably to wrap everything with it.

So here in index JS I will import the favorite

favorites context provider wider from

the store folder and there to favorites context file

and actually I'll wrap it in curly braces because

I don't want the default export the context object here

but I want my component functioning stat.

These favorites context provider function

which I export like this under its name

and we import named exports between curly braces.

That is standard Java script.

Now we can wrap this provider component

around the browser router and the app

and with that everything, all components

in this application are able

to interact with this context.

Now, how do we interact though?

Let's maybe start with the meetup item component.

Here we have this two favorites button.

I wanna make sure that when this button is clicked

we add this item to our context.

And I also wanna update the text on the button

depending on whether this item is

already part of my context or not.

And actually, if it is part of the context already

if we already did favorite and meetup item

this button should no longer add this item to the context

but remove it from my favorites array in the context.

Hence first step is to add a function

in this meetup item component

which we could name toggle favorite status handler.

The name is up to you though, and I'll bind

this function to the on click prop of this button.

so that when we click this button,

this function will be executed.

And now in this function,

we will need data from the context.

We need to find out whether this meetup item

is already part of the context or not

and then do different things depending on that information.

Now for that, we now need to tap

into the context and get values from there.

And we do this with help of another hook provided by react.

And that would be the use context hook.

This hook allows us to establish a connection

between this component and the context

simply by calling use context here,

and then by passing the context object

to which we wanna connect as our argument.

And here, I'm not talking about

our favorites context provider component

but about the context object, which we created

with create context, which is why I'm exporting

that as a default as well.

With this in meetup item we can import

the favorites context, whoops, like this

so that default export from going up

going up store favorites context,

and instead the favorites context,

which we pass to use context.

And that now gives us access to

this favorites context object

so to this object here, which we're distributing

through the value prop to all the components.

So to this object to this object

will have access now instead of meetup item.

That's the object which is stored

in this favorites, CTX constant now.

And now we can, for example, find out

if this item this meetup item here

is a favorite by using this favorites

CTX constant and calling item it's favorite.

So this method, which we defined

on our context there as well, this method

which points at the item, it's favorite handler function.

We execute this function now

by executing it here in the component like this.

And we need to pass in the idea of the meetup

for what you wanna check, whether it's favorite or not.

And we get the idea of this meetup through props.

There is this ID prop, which we pass

into our meetup item here when we render it.

So we can use props that ID to pass the ID

off this specific meetup to item as favorite

and add will return true or false

so here we then have that response.

Now here in the toggle favorite status handler

we can check if the item is a favorite

so if this constant has a true value,

and if that's the case we know that

we wanna remove that item from the context now

when that button was clicked.

Because it is a favorite already

which means now we wanna get rid of it.

So then we use our favorites, CTX, constant

this context object, and call remove favorite

and remove favorite alls that wants to meet up ID

So we pass props.id here.

Else if the item is not a favorite yet

we call favorites, CTX.add favorite.

And here we need to pass in a new meetup item now

so I will construct our object on the fly

and simply set my ID to props.id

the title to props.title

the description to props.description

the image to props.image

and the address to props.address.

And that now recreates this meetup item

and passes it as an argument to the add favorite function

which in the end triggers this add favorite handler function

in this favorites context provider component.

And add will then update the state there

add this item to the user favorites array.

And because the state was updated

it will update all child components

because this component here as a whole

will be updated and hence the JSX code

with all the child components will be updated again.

And hence all components will have access

to that latest state now.

So that's how we can now trigger

a state update to this global state,

this favorite state from insight to

meet up item component.

We changed some state, which is not managed

in this component, but on a global level.

And now going down to this button,

we probably wanna change the caption

depending on whether the item is a favorite or not.

So I'll put something dynamic here as a caption

and check if item is favorite.

So I'm using this constant here again,

which has true or false as a value.

And if it's true, then the button should say,

remove from favorites.

If it's false so if the item is not a favorite yet

the button should say to favorites

because then clicking the button

will add the item to the favorites.

And now that was a lot of work.

But if you did all of that, if you save this,

now you should be able to reload and click to favorites

and it should change to remove from favorites

and back and forth.

We don't see the favorites on the my favorites page yet

but adding favorites does work as we can tell

by this button.

Now let's make sure we also render

the favorites on this my favorites page,

and that we have a little batch here.