1
00:00:02,000 --> 00:00:03,000
Now to come to an end

2
00:00:03,000 --> 00:00:07,000
in this course section there's one last thing I wanna do.

3
00:00:07,000 --> 00:00:11,000
I wanna utilize this underscore documented JS file

4
00:00:11,000 --> 00:00:14,000
to actually render this notification which we have here

5
00:00:14,000 --> 00:00:16,000
through a portal.

6
00:00:16,000 --> 00:00:19,000
The notification we're showing for the contact form

7
00:00:19,000 --> 00:00:20,000
is showing up correctly.

8
00:00:20,000 --> 00:00:23,000
It's rendered correctly at the bottom of the screen

9
00:00:23,000 --> 00:00:25,000
because of the styling it has.

10
00:00:25,000 --> 00:00:28,000
But of course it is actually just dumped

11
00:00:28,000 --> 00:00:33,000
into this complex HTML structure somewhere nested

12
00:00:33,000 --> 00:00:36,000
in our HTML element tree.

13
00:00:36,000 --> 00:00:38,000
And whilst it looks correctly

14
00:00:38,000 --> 00:00:40,000
that's not correct semantically

15
00:00:40,000 --> 00:00:44,000
and it can make our page a bit more inaccessible as well.

16
00:00:44,000 --> 00:00:48,000
That's why we have this feature called React portals

17
00:00:48,000 --> 00:00:52,000
which allows us to render a component anywhere

18
00:00:52,000 --> 00:00:53,000
in our component tree.

19
00:00:53,000 --> 00:00:57,000
So to use it anywhere in our component tree,

20
00:00:57,000 --> 00:01:00,000
for example in the contact form JSX code

21
00:01:00,000 --> 00:01:02,000
as we do it now,

22
00:01:02,000 --> 00:01:04,000
but technically injected

23
00:01:04,000 --> 00:01:08,000
in a different place in the actual Dom tree.

24
00:01:08,000 --> 00:01:12,000
And that's then better for semantics and accessibility.

25
00:01:12,000 --> 00:01:15,000
Hence using a portal here would make sense

26
00:01:15,000 --> 00:01:17,000
but before using a portal

27
00:01:17,000 --> 00:01:21,000
we need to use this underscore document JS file

28
00:01:21,000 --> 00:01:24,000
because that allows us to add an extra hook

29
00:01:24,000 --> 00:01:29,000
which this portal will need somewhere in our HTML document.

30
00:01:29,000 --> 00:01:33,000
And for example, here in body at the bottom

31
00:01:33,000 --> 00:01:38,000
maybe we could add a div with an id of notifications.

32
00:01:38,000 --> 00:01:40,000
This is totally up to you.

33
00:01:40,000 --> 00:01:43,000
And we can then use this div to portal

34
00:01:43,000 --> 00:01:46,000
our notification component into this place

35
00:01:46,000 --> 00:01:48,000
when it's being rendered.

36
00:01:48,000 --> 00:01:51,000
To do that we can go to the notification component

37
00:01:51,000 --> 00:01:54,000
and convert it to a portal.

38
00:01:54,000 --> 00:01:56,000
That is pretty straightforward.

39
00:01:56,000 --> 00:02:01,000
All we have to do here is import React Dom from React Dom.

40
00:02:04,000 --> 00:02:06,000
And with that imported here

41
00:02:06,000 --> 00:02:11,000
we return React Dom, create portal

42
00:02:11,000 --> 00:02:16,000
then we have our JSX code like we do here

43
00:02:16,000 --> 00:02:18,000
so that does not change.

44
00:02:18,000 --> 00:02:22,000
And then the second argument is a selector

45
00:02:22,000 --> 00:02:24,000
where we select our Dom element

46
00:02:24,000 --> 00:02:26,000
where it should be portaled to.

47
00:02:26,000 --> 00:02:30,000
And we use the native browser APIs for selecting that place.

48
00:02:30,000 --> 00:02:33,000
For example, with document

49
00:02:33,000 --> 00:02:37,000
get element by id and then notifications.

50
00:02:39,000 --> 00:02:44,000
So this id I assigned in document JS here.

51
00:02:45,000 --> 00:02:49,000
That's what I now use for my portal here.

52
00:02:49,000 --> 00:02:51,000
And with that, it will be portaled there.

53
00:02:54,000 --> 00:02:56,000
Now, if we reload this page

54
00:02:56,000 --> 00:03:00,000
and I enter some data here, Max,

55
00:03:00,000 --> 00:03:03,000
this is a message.

56
00:03:03,000 --> 00:03:07,000
If I open that developer tools and go to the elements tab

57
00:03:07,000 --> 00:03:09,000
watch this div here at the bottom.

58
00:03:09,000 --> 00:03:12,000
This div with an id of notifications.

59
00:03:12,000 --> 00:03:14,000
If I click send message it updates

60
00:03:14,000 --> 00:03:18,000
and it actually contains the notification markup.

61
00:03:18,000 --> 00:03:21,000
So that component or the HTML code

62
00:03:21,000 --> 00:03:24,000
of that component is rendered down there

63
00:03:24,000 --> 00:03:28,000
even though we use it in the Dom tree of the contact form.

64
00:03:28,000 --> 00:03:31,000
So that's a pretty nice React feature.

65
00:03:31,000 --> 00:03:36,000
Not Next.JS exclusive, but easy to use with Next.JS

66
00:03:36,000 --> 00:03:38,000
when setting your own document JS file.

67
00:03:39,000 --> 00:03:41,000
And that's therefore the last thing

68
00:03:41,000 --> 00:03:43,000
I wanted to add to this project.