1
00:00:02,000 --> 00:00:04,000
So at this point we can close the modal

2
00:00:04,000 --> 00:00:08,000
if we click the backdrop, but we can't open it again.

3
00:00:08,000 --> 00:00:09,000
Now to open it again

4
00:00:09,000 --> 00:00:13,000
I wanna add a header component above my list here

5
00:00:13,000 --> 00:00:17,000
which gives me a button that allows me to open this modal.

6
00:00:17,000 --> 00:00:20,000
Now I prepared such a component in advance since it

7
00:00:20,000 --> 00:00:24,000
won't include any new features we haven't learned about yet.

8
00:00:25,000 --> 00:00:29,000
Attached you find a mainheader.jsx file

9
00:00:29,000 --> 00:00:32,000
and a link to the MainHeader.module.css file.

10
00:00:32,000 --> 00:00:36,000
And the MainHeader.jsx file simply defines a

11
00:00:36,000 --> 00:00:39,000
main header function where I got some JSX code.

12
00:00:41,000 --> 00:00:45,000
Now one noteworthy new thing is in there though.

13
00:00:45,000 --> 00:00:47,000
I'm importing some icon components

14
00:00:47,000 --> 00:00:50,000
from a third party library.

15
00:00:50,000 --> 00:00:53,000
And at the moment this library isn't downloaded

16
00:00:53,000 --> 00:00:55,000
into this project here.

17
00:00:55,000 --> 00:00:57,000
To make sure these icons are available here

18
00:00:57,000 --> 00:01:00,000
and this import command here works,

19
00:01:00,000 --> 00:01:02,000
you should quit your development server

20
00:01:02,000 --> 00:01:06,000
by pressing control+C and you should then run

21
00:01:06,000 --> 00:01:11,000
npm install react-icons to install this react icons library

22
00:01:11,000 --> 00:01:13,000
into this project.

23
00:01:13,000 --> 00:01:15,000
This makes it available as part of your code base

24
00:01:15,000 --> 00:01:18,000
and importing these icon components will then work

25
00:01:20,000 --> 00:01:23,000
and thereafter you can run npm run dev again to bring

26
00:01:23,000 --> 00:01:26,000
up that development server again, which you must have

27
00:01:26,000 --> 00:01:29,000
up and running as long as you are working on your code.

28
00:01:30,000 --> 00:01:32,000
So with that we got that main header component

29
00:01:32,000 --> 00:01:35,000
and now this main header component should be rendered

30
00:01:35,000 --> 00:01:38,000
above this post's list.

31
00:01:38,000 --> 00:01:41,000
For that I'll actually go into the App.jsx file and

32
00:01:41,000 --> 00:01:45,000
in there I'll import MainHeader from components/MainHeader

33
00:01:46,000 --> 00:01:51,000
and then return a fragment which wraps this main section

34
00:01:51,000 --> 00:01:52,000
and PostsList

35
00:01:52,000 --> 00:01:56,000
and render the main header here above the main section.

36
00:01:57,000 --> 00:01:59,000
With that, we got this main header here

37
00:01:59,000 --> 00:02:01,000
but this button of course doesn't work yet.

38
00:02:02,000 --> 00:02:05,000
To make it work, this button now also needs

39
00:02:05,000 --> 00:02:09,000
to set this state that shows or hides the modal.

40
00:02:09,000 --> 00:02:11,000
The modal is visible state

41
00:02:11,000 --> 00:02:14,000
however that state is in the PostsList component.

42
00:02:14,000 --> 00:02:17,000
But you learned how this problem can be fixed.

43
00:02:17,000 --> 00:02:21,000
You can lift the state up, we can cut this state

44
00:02:21,000 --> 00:02:25,000
from PostsList and move it into the app component.

45
00:02:25,000 --> 00:02:29,000
And there we then also must import useState

46
00:02:30,000 --> 00:02:34,000
from react to make that useState hook available there.

47
00:02:37,000 --> 00:02:42,000
We then also must cut the HideModalHandler function

48
00:02:43,000 --> 00:02:48,000
and move that to app and also already add a new function

49
00:02:48,000 --> 00:02:52,000
called showModalHandler, which does the opposite

50
00:02:52,000 --> 00:02:53,000
of HideModalHandler.

51
00:02:53,000 --> 00:02:56,000
It simply sets modalIsVisible to true again.

52
00:02:57,000 --> 00:03:01,000
And now we just need to make sure that the information

53
00:03:01,000 --> 00:03:02,000
whether the modal should be visible

54
00:03:02,000 --> 00:03:06,000
or not is available in the PostsList component.

55
00:03:07,000 --> 00:03:10,000
Now to make it available there, we can use props again

56
00:03:10,000 --> 00:03:14,000
we can add a new prop, isPosting could be the name.

57
00:03:14,000 --> 00:03:18,000
You could also stick to modalIsVisible alternatively

58
00:03:19,000 --> 00:03:21,000
but here I'll use isPosting as a prop name

59
00:03:21,000 --> 00:03:23,000
and that should be true or false

60
00:03:23,000 --> 00:03:28,000
and I'll use it down there in my conditional rendering code.

61
00:03:28,000 --> 00:03:30,000
So if this is true, the modal should be displayed

62
00:03:30,000 --> 00:03:33,000
because if I am posting, I'm working on a new post.

63
00:03:33,000 --> 00:03:36,000
So then this form should be displayed and if it's false

64
00:03:36,000 --> 00:03:37,000
it should not be displayed.

65
00:03:38,000 --> 00:03:41,000
And in the app component we can now set this new

66
00:03:41,000 --> 00:03:44,000
isPosting prop on PostsList.

67
00:03:44,000 --> 00:03:47,000
And simply forward our modalIsVisible value.

68
00:03:47,000 --> 00:03:52,000
So set the value of this state as a value for this prop.

69
00:03:52,000 --> 00:03:54,000
And with that we're passing the information

70
00:03:54,000 --> 00:03:58,000
whether the modal should be visible or not to PostsList.

71
00:03:59,000 --> 00:04:01,000
Of course now we also must make sure

72
00:04:01,000 --> 00:04:04,000
that we can talk into the opposite direction.

73
00:04:04,000 --> 00:04:06,000
So if the modal is closed

74
00:04:06,000 --> 00:04:08,000
we wanna trigger hideModalHandler.

75
00:04:08,000 --> 00:04:10,000
If the backdrop is clicked, for example

76
00:04:10,000 --> 00:04:14,000
and in the main header, if the button is clicked

77
00:04:14,000 --> 00:04:16,000
I wanna show the modal again.

78
00:04:17,000 --> 00:04:19,000
Now here in MainHeader,

79
00:04:19,000 --> 00:04:23,000
I already do expect to get a onCreatePost prop

80
00:04:23,000 --> 00:04:26,000
which I forward to onClick on that button.

81
00:04:26,000 --> 00:04:28,000
So here I want to have a pointer

82
00:04:28,000 --> 00:04:31,000
at that function that should make the modal visible.

83
00:04:32,000 --> 00:04:34,000
So therefore back in App.jsx

84
00:04:34,000 --> 00:04:38,000
we can add the onCreatePost prop to MainHeader.

85
00:04:38,000 --> 00:04:39,000
We can set that prop

86
00:04:39,000 --> 00:04:43,000
and set it to showModalHandler.

87
00:04:45,000 --> 00:04:47,000
So that this function so that this function is passed

88
00:04:47,000 --> 00:04:49,000
as a value to onCreatePost.

89
00:04:49,000 --> 00:04:52,000
And on the PostsList component, we could add another

90
00:04:52,000 --> 00:04:57,000
prop called onStopPosting and here pass

91
00:04:58,000 --> 00:05:01,000
the hideModalHandler function as a value.

92
00:05:03,000 --> 00:05:05,000
Now we just have to make sure that we use this

93
00:05:05,000 --> 00:05:10,000
onStopPosting function in PostsList and therefore there

94
00:05:10,000 --> 00:05:13,000
again we can accept it as a new prop.

95
00:05:15,000 --> 00:05:19,000
And then here for modal for the onClose prop

96
00:05:19,000 --> 00:05:24,000
we now pass the onStopPosting value to the modal component

97
00:05:27,000 --> 00:05:31,000
so that in the end the onClose prop of the modal component

98
00:05:31,000 --> 00:05:34,000
receives this hideModalHandler function.

99
00:05:35,000 --> 00:05:39,000
And passing these different functions across multiple levels

100
00:05:39,000 --> 00:05:42,000
of components and passing these different state values

101
00:05:42,000 --> 00:05:46,000
around of course can be confusing at first.

102
00:05:46,000 --> 00:05:48,000
So therefore it's just important to keep in mind that

103
00:05:48,000 --> 00:05:52,000
in the end we're just passing values around so that

104
00:05:52,000 --> 00:05:54,000
in the different components we can use exactly

105
00:05:54,000 --> 00:05:57,000
the values that should be used there.

106
00:05:58,000 --> 00:05:59,000
By the way, the fact

107
00:05:59,000 --> 00:06:02,000
that my custom props here that take functions

108
00:06:02,000 --> 00:06:05,000
as values like onCreatePost are called

109
00:06:05,000 --> 00:06:10,000
onCreatePost is just a convention I'm following.

110
00:06:10,000 --> 00:06:13,000
I could also just name it createPost

111
00:06:13,000 --> 00:06:17,000
and update the name here in MainHeader of course

112
00:06:18,000 --> 00:06:20,000
and that would work as well.

113
00:06:20,000 --> 00:06:22,000
However, it's a common convention to start

114
00:06:22,000 --> 00:06:24,000
with on in your prop name.

115
00:06:24,000 --> 00:06:29,000
If that prop is receiving a function as a value to

116
00:06:29,000 --> 00:06:32,000
in the end make it clear that this prop won't work

117
00:06:32,000 --> 00:06:35,000
with any other value, and in the end will typically

118
00:06:35,000 --> 00:06:37,000
link that function that is received

119
00:06:37,000 --> 00:06:40,000
as a value to some event listener further down

120
00:06:40,000 --> 00:06:42,000
in your JSX component code.

121
00:06:44,000 --> 00:06:46,000
However, now with all these changes made

122
00:06:46,000 --> 00:06:48,000
if you save all your code

123
00:06:48,000 --> 00:06:52,000
we can close that modal and we can also open it again.

124
00:06:52,000 --> 00:06:57,000
So that's now working and therefore now back in App.jsx

125
00:06:58,000 --> 00:06:59,000
we can also also switch the default

126
00:06:59,000 --> 00:07:03,000
for modal is visible from true to false to make sure

127
00:07:03,000 --> 00:07:08,000
that initially if we reload this page, no modal is visible

128
00:07:08,000 --> 00:07:11,000
but if you click that post we see it

129
00:07:11,000 --> 00:07:13,000
and then there we can still add it

130
00:07:13,000 --> 00:07:18,000
and add our text as we need to and update this first post.

131
00:07:19,000 --> 00:07:23,000
And therefore that's yet another huge step forward

132
00:07:23,000 --> 00:07:27,000
with more state passing across different components.

133
00:07:27,000 --> 00:07:30,000
And with that, we're now ready to dive even deeper

134
00:07:30,000 --> 00:07:32,000
into React and make sure

135
00:07:32,000 --> 00:07:36,000
that we're now not just updating this first post here

136
00:07:36,000 --> 00:07:38,000
but that instead we can really submit that form.

137
00:07:38,000 --> 00:07:43,000
And once we do so, we actually edit this list of posts

138
00:07:43,000 --> 00:07:47,000
so that we finally can start adding new posts instead

139
00:07:47,000 --> 00:07:49,000
of just editing the first one.