All language subtitles for 033 More Context Usage_en

So, to output the favorites

on the my favorites page,

we can go to this favorites page here, in the pages folder.

And again, tap into our context here

because on this page we now in the end wanna get

all the favorites from the context.

Now for this we can of course import useContext again

from

react

and also import the FavoritesContext object from

the store folder and there favorites context.

And then we connect to the context

just as we did it before

we create a constant which then stores this context object

and we call use context and past as context object

we created in that context file to use context.

And that gives us the current context snapshot then.

Now we got our context here and that means that now

from that favorites context

we can get our favorites array.

So (indistinct) here, we can now return let's say a section

where we say in h1 tag

my favorites

and below that I wanna output a list of meetups.

A list of my favorite meetups.

For this we can recycle the meetup list component

because this component does not care

whether it's all meetups or a subset of the meetups.

All it cares about

is that we output items that have these properties.

So we can import

meetup list from

the components folder meetups

meetup list

and then output that below the h1 tag.

Meetup list like this.

And set the meetups prop here

equal to favoritesCtx.favorites

because that is our array of favorites.

Now if we do that, on that favorites page we see

all the favorites we have.

The problem just is that if I remove a favorite

we don't see anything here

which makes sense because I currently have no favorites.

But we might wanna render some fallback message

for this case

And one way of doing this is

that we define a little helper variable here content

and we then check if favorites context total favorites

is equal to zero.

TotalFavorites is a never property

we're managing in our context.

And if that is zero, we know we have no favorites.

Then all set content equal to let's say a paragraph

where I simply say you got no favorites

yet.

Start adding some ?

Else if we do have favorites

I set content equal to

my meetup list here.

So in the end to, this line of code.

And this might look strange

storing HTML elements in variables

but it's actually not strange than returning HTML elements.

You can use JSX code anywhere, where a value is needed.

We saw it in arrays

in return statements you can also store JSX in variables.

That is totally fine.

And now we can simply output the value

of that content variable in our returned JSX code

to then have different values here

depending on whether we have favorites or not.

We now save this.

I got no favorites yet here

but if I add an item as a favorite, I see that instead.

And if I remove it, we're back to this (indistinct) text.

So this works.

One important note though,

if I add an item to my favorites and I then reload the page

it will be lost.

The reason for this is that our context

is only stored in memory.

Because we're only working with state

and with constants here, it's not stored permanently.

If you would want to store it permanently

you would need to use some browsers storage here

in the favorites context provider

like local storage, for example,

or store it on a server as well.

I'm not doing that here because I wanna focus on this

core feature of react context

but that is something you could add

if you wanna enhance this application.

For the moment it's simply some temporary storage

which survives as long as we are on this page

but if we ever reload or leave the page

our favorites will be lost.

Our meetups won't because those are stored on a server.

It's just something that is worth knowing.

And now with that, that's almost it.

As a last step I now just wanna make sure that

in the main navigation we also see a batch

next to the my favorites text

that indicates how many favorites we currently have.

And that simply means that in the main navigation JS file

we also wanna connect to context and get values from there.

So I'll again import use context here, from react

and import my context object

the favorites context from going up

going up store favorites context

and in main navigation we then get the favorites context

by using, use context, and connecting that to

the favorites context.

And then here on the favorites link

we can simply add a little extra span

next to this my favorites text

in which we output

favoritesCtx.totalFavorites

because that is a number

managed in our context

with the total number of meetup items in our array.

And I'll give this span a class of classes.badge.

Which is one of the classes prepared in this CSS file

I gave to you earlier.

And with this, we now have this badge here.

And if we add items to the context

that badge does update.

And also if we remove items of course.