Now to come to an end
in this course section there's one last thing I wanna do.
I wanna utilize this underscore documented JS file
to actually render this notification which we have here
through a portal.
The notification we're showing for the contact form
is showing up correctly.
It's rendered correctly at the bottom of the screen
because of the styling it has.
But of course it is actually just dumped
into this complex HTML structure somewhere nested
in our HTML element tree.
And whilst it looks correctly
that's not correct semantically
and it can make our page a bit more inaccessible as well.
That's why we have this feature called React portals
which allows us to render a component anywhere
in our component tree.
So to use it anywhere in our component tree,
for example in the contact form JSX code
as we do it now,
but technically injected
in a different place in the actual Dom tree.
And that's then better for semantics and accessibility.
Hence using a portal here would make sense
but before using a portal
we need to use this underscore document JS file
because that allows us to add an extra hook
which this portal will need somewhere in our HTML document.
And for example, here in body at the bottom
maybe we could add a div with an id of notifications.
This is totally up to you.
And we can then use this div to portal
our notification component into this place
when it's being rendered.
To do that we can go to the notification component
and convert it to a portal.
That is pretty straightforward.
All we have to do here is import React Dom from React Dom.
And with that imported here
we return React Dom, create portal
then we have our JSX code like we do here
so that does not change.
And then the second argument is a selector
where we select our Dom element
where it should be portaled to.
And we use the native browser APIs for selecting that place.
For example, with document
get element by id and then notifications.
So this id I assigned in document JS here.
That's what I now use for my portal here.
And with that, it will be portaled there.
Now, if we reload this page
and I enter some data here, Max,
this is a message.
If I open that developer tools and go to the elements tab
watch this div here at the bottom.
This div with an id of notifications.
If I click send message it updates
and it actually contains the notification markup.
So that component or the HTML code
of that component is rendered down there
even though we use it in the Dom tree of the contact form.
So that's a pretty nice React feature.
Not Next.JS exclusive, but easy to use with Next.JS
when setting your own document JS file.
And that's therefore the last thing
I wanted to add to this project.