Now for this course section,
you should of course know what React Context is.
That's a prerequisite and therefore
I strongly recommend
that you go through dedicated React resources
diving into React Context
before you continue with this section.
And with that out of the way attached
you'll find a notification component file
a sip file containing this notification JS
and this notification.module.css file.
These two files are attached in this sip file
and you should add them to your project
into the UI folder in the components folder.
That's a simple presentational component
which will just output a title and a message
as a notification shown at the bottom of the screen
once we do show it.
At the moment we have no code for showing it
but that's about to change throughout this course section.
Now one important note first,
you don't have to use React Context
for this course section.
For giving the user some feedback
about the current status of the ongoing HTTP request,
you could also just use Local State
and provide any feedback of your choice.
My goal just is to show an overlay
a little notification at the bottom of the screen.
And I wanna control that globally with the context API
so that we can trigger this notification
and control this notification
from anywhere in our application.
That's my only goal here.
Now, therefore, before we add react context
let's see how the end result is should look like.
Let's go to the underscore app JS file in the pages folder.
And there we have our layout.
We have the head section with the general head data
and we got this component prop
which renders the actual page content.
Now in here,
I also wanna output the notification component.
And for this, we need to import notification
from the components folder there
from UI and the notification JS file we just added.
I'm just adding it here so
that you see what we will add from this section.
This notification component takes three props
a title, a message, and a status.
And therefore I'll set these three props here now.
I'll set the title to test, the message
to this is a test, like this
and the status to pending, for a start.
If we now save, we have this notification element
at the bottom, and the goal is to show this
once we did click the register button
and then once the request succeeded or failed
we wanna replace it with a proper error or success variant.
Let me show you these variants here.
If we changed as to success
if we change the status to success, this switches
to this success notification with a green background
and if on the other hand, we change it to error
this switches to this red notification.
So that's the notification, but
of course it shouldn't be hard coded here.
It shouldn't always show up.
Instead it should only be shown when we want it
to show up when we have an ongoing request
or when we have a response from our request.
And I wanna control it with the context API
because I want to render the notification component here
in underscore app JS,
but I wanna trigger it from inside other components.
For example, from
inside that newsletter registration component,
where we also send this HTTP request.
And because that's the case,
because it is components should be triggered
from totally different components than the component
it's being rendered in,
I wanna use app wide state management.
I wanna use the context API
to a wide pointless prop drilling
and long prop chains across multiple components.
And therefore let's now start using the context API.