All language subtitles for 005 Using Context Data In Components_Downloadly.ir_en

So now that the Context is defined

and we wrap our components here with our Context provider,

it's time to start using that Context.

Now I mentioned that I wanna show the notification here

in this underscore App.js file.

And I would actually have problems with that

because that's also the file

where we wrap with our Notification Context Provider.

So this component itself,

this MyApp component in which I use the notification

is not wrapped by Notification Context Provider

because it's this component's JSX code

where we do the wrapping.

Hence we can't tap into our Context here

inside of this component function.

But that's no problem,

we can get rid of the notification here

and cut it and remove its import,

and instead of just use the layout component

because that also is a wrapper around all our other content.

And it's the perfect component for rendering a notification.

Also, if we have a look at its name, layout,

it is per definition, a wrapper for visual content.

And therefore, if I go to my layout component,

I'll simply add the notification there,

and then of course also add the import

for the notification component from the UI folder like this.

And now in the layout component,

we can tap into our Context.

And for that I'll import the use Context hook

which allows us to do that.

We can call use Context and then pass the Context

to which we want to establish a connection

as a argument to use Context.

So to make that work,

we should import the Context to which we want to connect.

And that's the Notification Context,

not the Notification Context Provider,

but just the Notification Context,

because I just want to connect to this Context object here.

So not the provider component, but this Context object,

this one, which is exported as a default.

That's what I need for use Context.

So in the layout component,

that's what I'll import from my store folder.

So for my store Notification Context file.

So pass Notification Context as a argument to use Context

and that gives us access to that Context value.

Now we can use that Context

to call, show, or a hide notification,

or to get the current notification data.

And that's what we need here in this layout component

to conditionally show the notification.

So here I'll then get access to the notification,

and I'll name this activeNotification.

So I'll store it in notification, managed by my Context

in a constant here in this component.

And if that is not null,

so if we have an activeNotification in our Context,

then I want to render this notification

with the data stored in activeNotification.

So we want to render notification conditionally,

and we can do it as we always do it,

with this syntax here, and then just populate the props here

with the active values from the active notification.

So activeNotification.title,

and also set the message to activeNotification.message,

and for the status,

I'll set this to activeNotification.status.

So now this notification component is rendered

whenever we have an activeNotification in our store,

in our Context.

At the moment though, we never have an activeNotification

because we have no place

that would trigger the show notification handler

by calling show notification on the Context object.

And that's what I want to change now.

Now that all the Context is set up,

I want to dive into the components

where we do send http requests

to then call show notification

from inside those components

to show and update that notification

with the appropriate data.