1
00:00:02,000 --> 00:00:05,000
Let's continue diving deeper into React.

2
00:00:05,000 --> 00:00:08,000
We get this form here, this input form

3
00:00:08,000 --> 00:00:09,000
and it looks decent

4
00:00:09,000 --> 00:00:13,000
but I'd like to open it as a modal overlay.

5
00:00:13,000 --> 00:00:17,000
So some overlay that's above the rest

6
00:00:17,000 --> 00:00:19,000
of the content on this page.

7
00:00:19,000 --> 00:00:24,000
And in the end, achieving this look is a pure CSS thing.

8
00:00:25,000 --> 00:00:26,000
Now, what we could do

9
00:00:26,000 --> 00:00:30,000
is we could edit the styles of this NewPost component

10
00:00:30,000 --> 00:00:33,000
such that it has this modal look.

11
00:00:33,000 --> 00:00:36,000
You can add a backdrop behind the form,

12
00:00:36,000 --> 00:00:39,000
so some background so that it looks like an overlay.

13
00:00:40,000 --> 00:00:43,000
But I'd rather take a different route.

14
00:00:44,000 --> 00:00:45,000
In the end, I wanna make sure

15
00:00:45,000 --> 00:00:49,000
that in the place where I use this NewPost component,

16
00:00:49,000 --> 00:00:52,000
and I just pressed the auto format shortcut here

17
00:00:52,000 --> 00:00:55,000
to put these props into separate lines,

18
00:00:55,000 --> 00:00:58,000
which is still valid code but easier to read.

19
00:00:58,000 --> 00:00:59,000
But I'd like to take a route

20
00:00:59,000 --> 00:01:02,000
where I have a new Modal component,

21
00:01:02,000 --> 00:01:03,000
which doesn't exist yet,

22
00:01:03,000 --> 00:01:06,000
which can be wrapped around NewPost

23
00:01:06,000 --> 00:01:10,000
to give that NewPost that modal overlay look.

24
00:01:10,000 --> 00:01:12,000
Again, this Modal component

25
00:01:12,000 --> 00:01:14,000
is a component we have yet to add

26
00:01:14,000 --> 00:01:15,000
but I'd like to have a component

27
00:01:15,000 --> 00:01:17,000
that can be used like this.

28
00:01:18,000 --> 00:01:20,000
Now, the idea behind that

29
00:01:20,000 --> 00:01:24,000
is simply that on more complex websites,

30
00:01:24,000 --> 00:01:26,000
chances are high that you have all kinds

31
00:01:26,000 --> 00:01:30,000
of content that should have that overlay look,

32
00:01:30,000 --> 00:01:33,000
not just this NewPost form

33
00:01:33,000 --> 00:01:36,000
but maybe also some warning dialogs, anything like that.

34
00:01:37,000 --> 00:01:39,000
So it would be nice to have such a wrapper,

35
00:01:39,000 --> 00:01:43,000
and being able to wrap content with components of yours

36
00:01:43,000 --> 00:01:47,000
is indeed another core React concept.

37
00:01:47,000 --> 00:01:50,000
You can really only compose flexible,

38
00:01:50,000 --> 00:01:52,000
powerful user interfaces

39
00:01:52,000 --> 00:01:55,000
if you're able to also wrap components

40
00:01:55,000 --> 00:01:56,000
with other components

41
00:01:56,000 --> 00:02:00,000
to apply some extra styles to them, for example.

42
00:02:00,000 --> 00:02:02,000
And therefore, to achieve this here,

43
00:02:02,000 --> 00:02:05,000
I'll add a new component called Modal.

44
00:02:05,000 --> 00:02:08,000
A Modal.jsx file is therefore added.

45
00:02:08,000 --> 00:02:13,000
And attached, you find a link to a Modal.module.css file,

46
00:02:13,000 --> 00:02:16,000
which you should add, which simply comes with some styles

47
00:02:16,000 --> 00:02:20,000
that will help us achieve that overlay look.

48
00:02:20,000 --> 00:02:23,000
And then inside of Modal.jsx,

49
00:02:23,000 --> 00:02:26,000
we can create a Modal function

50
00:02:27,000 --> 00:02:29,000
and export that as a default.

51
00:02:30,000 --> 00:02:34,000
And then in there, I wanna return a fragment,

52
00:02:34,000 --> 00:02:37,000
so this empty tag

53
00:02:37,000 --> 00:02:41,000
where I have a div without any content inside.

54
00:02:41,000 --> 00:02:43,000
And then a dialog element

55
00:02:43,000 --> 00:02:45,000
that will hold the actual modal content

56
00:02:45,000 --> 00:02:49,000
and this div will be used to render a background,

57
00:02:49,000 --> 00:02:53,000
a backdrop as it's also often called for this modal.

58
00:02:55,000 --> 00:02:58,000
Now, we should import some CSS classes here

59
00:02:58,000 --> 00:03:03,000
from Modal.module.css.

60
00:03:03,000 --> 00:03:07,000
And then assign one class here to this div,

61
00:03:07,000 --> 00:03:10,000
and that would be the backdrop class.

62
00:03:12,000 --> 00:03:15,000
And to the dialog, we should also add a class

63
00:03:15,000 --> 00:03:17,000
and that's the modal class.

64
00:03:18,000 --> 00:03:22,000
And backdrop and modal are both CSS classes defined

65
00:03:22,000 --> 00:03:24,000
in this CSS file.

66
00:03:26,000 --> 00:03:28,000
Now with that, we have a Modal component

67
00:03:28,000 --> 00:03:32,000
but if we try to use it as a wrapper around NewPost,

68
00:03:32,000 --> 00:03:33,000
so inside of PostsList,

69
00:03:33,000 --> 00:03:38,000
if I go there and I then try to import this Modal component,

70
00:03:41,000 --> 00:03:46,000
which we just added from ./Modal, like this,

71
00:03:46,000 --> 00:03:49,000
and I then use it as a wrapper

72
00:03:49,000 --> 00:03:52,000
with the opening and closing tag around NewPost,

73
00:03:52,000 --> 00:03:57,000
you will see that it doesn't really look the way it should.

74
00:03:57,000 --> 00:03:59,000
It looks the backdrop is visible.

75
00:03:59,000 --> 00:04:02,000
We have this gray background,

76
00:04:02,000 --> 00:04:05,000
this transparent black background everywhere

77
00:04:05,000 --> 00:04:09,000
but the form and the modal is nowhere to be seen.

78
00:04:10,000 --> 00:04:14,000
The reason for that is that if you wrap content,

79
00:04:14,000 --> 00:04:15,000
no matter if it's a component

80
00:04:15,000 --> 00:04:18,000
or some default built-in elements,

81
00:04:18,000 --> 00:04:21,000
if you wrap content with another custom component,

82
00:04:21,000 --> 00:04:24,000
by default, React does not know

83
00:04:24,000 --> 00:04:26,000
where to put that wrapped content

84
00:04:26,000 --> 00:04:29,000
inside the wrapping component.

85
00:04:29,000 --> 00:04:31,000
So inside the Modal component in this case.

86
00:04:32,000 --> 00:04:34,000
You have to tell React

87
00:04:34,000 --> 00:04:36,000
where that wrapped content should go.

88
00:04:37,000 --> 00:04:41,000
And you do tell React with another special prop.

89
00:04:41,000 --> 00:04:43,000
So with the props object.

90
00:04:43,000 --> 00:04:48,000
And that special prop is the children prop.

91
00:04:50,000 --> 00:04:54,000
By the way, instead of always using props dot,

92
00:04:54,000 --> 00:04:57,000
you can also use object destructuring here

93
00:04:57,000 --> 00:05:00,000
to directly get access to a specific value.

94
00:05:00,000 --> 00:05:04,000
So to a specific property of that props object.

95
00:05:05,000 --> 00:05:07,000
This is not only possible

96
00:05:07,000 --> 00:05:09,000
when using this special children prop

97
00:05:09,000 --> 00:05:11,000
but it works with all props.

98
00:05:11,000 --> 00:05:13,000
So for the Post component,

99
00:05:13,000 --> 00:05:16,000
you could, for example, also use object destructuring

100
00:05:16,000 --> 00:05:19,000
to get the author and the body,

101
00:05:19,000 --> 00:05:23,000
and then save yourself the props dot call down there.

102
00:05:25,000 --> 00:05:26,000
But that's just a side note.

103
00:05:26,000 --> 00:05:29,000
So this is just a more concise way of getting access

104
00:05:29,000 --> 00:05:30,000
to your props.

105
00:05:30,000 --> 00:05:32,000
What's new and important here

106
00:05:32,000 --> 00:05:34,000
is this special children prop.

107
00:05:35,000 --> 00:05:38,000
Thus far, we always added our own props.

108
00:05:38,000 --> 00:05:42,000
A post, for example, has our own author and body prop.

109
00:05:42,000 --> 00:05:44,000
And these names were up to you.

110
00:05:45,000 --> 00:05:47,000
Now, for children, it's different.

111
00:05:47,000 --> 00:05:49,000
That's a reserved prop name

112
00:05:49,000 --> 00:05:52,000
because children always refers to the content

113
00:05:52,000 --> 00:05:54,000
that's passed between the opening

114
00:05:54,000 --> 00:05:58,000
and closing tags of your custom component.

115
00:05:59,000 --> 00:06:03,000
So here this content, the NewPost component in this case,

116
00:06:03,000 --> 00:06:06,000
that's the value that will be received

117
00:06:06,000 --> 00:06:10,000
on the children prop in this Modal component function.

118
00:06:10,000 --> 00:06:12,000
And we then output it down there

119
00:06:12,000 --> 00:06:15,000
so that we tall React that in the end here,

120
00:06:15,000 --> 00:06:17,000
it should output the content

121
00:06:17,000 --> 00:06:19,000
that's passed between the modal opening

122
00:06:19,000 --> 00:06:21,000
and closing tags.

123
00:06:21,000 --> 00:06:23,000
Now, with that change applied,

124
00:06:23,000 --> 00:06:26,000
we just have to adjust the styling

125
00:06:26,000 --> 00:06:29,000
of this NewPost component here a little bit.

126
00:06:29,000 --> 00:06:34,000
And get rid of this box-shadow, border-radius and margin.

127
00:06:36,000 --> 00:06:38,000
And also back in the Modal component,

128
00:06:38,000 --> 00:06:43,000
add the special open prop on dialog just like that.

129
00:06:43,000 --> 00:06:45,000
The value theoretically is true

130
00:06:45,000 --> 00:06:48,000
but if you set true as a value for a prop,

131
00:06:48,000 --> 00:06:50,000
you can also omit it and just add the prop name,

132
00:06:50,000 --> 00:06:54,000
and then true will be used as a default value.

133
00:06:54,000 --> 00:06:56,000
And this open prop is simply required

134
00:06:56,000 --> 00:07:00,000
by the default dialog element to make sure it's visible.

135
00:07:01,000 --> 00:07:04,000
And with all these steps taken,

136
00:07:04,000 --> 00:07:06,000
you get that overlay with that form

137
00:07:06,000 --> 00:07:08,000
and it's above the other content.

138
00:07:08,000 --> 00:07:10,000
So that's great.

139
00:07:10,000 --> 00:07:13,000
That's now the children prop in action,

140
00:07:13,000 --> 00:07:15,000
helping us create a component

141
00:07:15,000 --> 00:07:19,000
that can be used as a wrapper around another component.