To use the context API
I'll create a new folder,
which you don't have to do,
but I wanna store my context related files
my application wide state related files
in a separate folder.
And I'll name the folder store.
Since this contains my state store
for the entire application.
And in store I'll add a new file, which I'll name
notification-context.JS.
This file is all is up to you though the file name.
Now in here we wanna import from react
and we wanna import the create context function
because the goal here is to create a new context,
a new context for managing our notifications.
Now we can provide an initialization object here,
which defines the structure of this context
and the context so does object,
which will also be exposed to the different components
in our application later,
this context should actually have a notification
property let's say,
which is null initially,
but which eventually will be an object with a title,
a message and a status property.
So a nested object.
And besides that, besides that notification property,
I also want to have a method for showing a notification,
the show notification method.
So a property which holds a function,
which initially may be empty.
So which isn't doing anything here
because we'll replace it with a different function
in a different place anyways,
I'm just setting up my base context here
to get better auto completion.
So the data here is really just dummy data in the end.
Still I wanna have a show notification function
and then let's say also
a hide notification function like this.
That could be our context.
And with that all store it in a constant,
the notification context.
And I'll then export this notification context here
to make it a way level outside of this file as well.
So that we can tap into this context
and use this context with the use context react hook
in our react components.
Now you know that the context which we create here
actually allows us to create a component,
a provider a component which we can wrap
around the components and their child components
that should be able to tap into this context.
And therefore I'll actually change this
to an upper case character here.
The N to make it clear that we can get component
out of this thing here.
Now the goal will be to wrap this overall,
content here with our context later.
So to wrap all these components with our context.
However I don't just wanna provide my context like this.
Instead I wanna create a separate component,
which also manages all the context related state.
So back end is notification context
file in the store folder.
I'll not just create a context here and export it.
Instead I'll also create a component in here,
the notification context provider component,
and this component will return
notification context.Provider.
So this component which we can get out of this context
wrapped around props children.
So here I'll wrap it around props children,
and I'm doing that so that
we can use the notification context provider component
to wrap it around our components,
which will then automatically have access
to all our context.
Hence I'll also exports this function.
And now it's this notification context per wider function,
which I wanna wrap around my components,
which should have access to this context.
And in this case that's in the underscore app JS file.
I wanna wrap basically all that content here
with my context.
So here we can wrap everything
with notification context provider
and make sure that you import notification context provider
from this notification context file into store folder.
And then wrap that around all this content,
which means that all these components,
which are wrapped by the provider
will be able to utilize our context later.
And I'm creating this separate wrapper
because this notification context provider function here
will not just wrap props children.
We wouldn't need it for that,
if that would be all it's doing,
but this function should also manage
all the context related state.
So here we will work with use state
and so on to manage the notification state
and to create the show and hide notification functions
inside of this component.
And that's what we'll do as a next step.