1
00:00:02,000 --> 00:00:03,000
[Maximilian] So that's how we can useState.

2
00:00:03,000 --> 00:00:05,000
And the special thing really is

3
00:00:05,000 --> 00:00:07,000
that when you update your state

4
00:00:07,000 --> 00:00:10,000
the component function gets executed again

5
00:00:10,000 --> 00:00:13,000
and therefore the latest JSX snapshot gets

6
00:00:13,000 --> 00:00:17,000
used by React, gets compared to the previous

7
00:00:17,000 --> 00:00:21,000
snapshot and the UI is updated where needed.

8
00:00:22,000 --> 00:00:26,000
Now, here, however, the goal was to basically get

9
00:00:26,000 --> 00:00:30,000
this text into this first post component.

10
00:00:30,000 --> 00:00:32,000
And of course that's not happening right now.

11
00:00:33,000 --> 00:00:35,000
One problem we're facing here

12
00:00:35,000 --> 00:00:39,000
is that this state is inside the NewPost component.

13
00:00:39,000 --> 00:00:41,000
That's great, but we don't need it there.

14
00:00:41,000 --> 00:00:44,000
Instead, we need it in the PostsList component

15
00:00:44,000 --> 00:00:46,000
so that we can set this entered text

16
00:00:46,000 --> 00:00:49,000
as a value for this body.

17
00:00:49,000 --> 00:00:53,000
Now, how do we get the state from NewPost to PostsList?

18
00:00:54,000 --> 00:00:59,000
Well, an obvious solution would be to import useState

19
00:00:59,000 --> 00:01:03,000
from React in the PostsList component

20
00:01:03,000 --> 00:01:05,000
and register the state there.

21
00:01:05,000 --> 00:01:08,000
We could have the EnteredBody here

22
00:01:08,000 --> 00:01:09,000
with help of useState.

23
00:01:11,000 --> 00:01:13,000
And this should use object destructuring

24
00:01:13,000 --> 00:01:15,000
here to get the EnteredBody

25
00:01:15,000 --> 00:01:19,000
and the set EnteredBody state updating function.

26
00:01:20,000 --> 00:01:23,000
Now we have the state in the component where we need it

27
00:01:23,000 --> 00:01:26,000
and we could set this body to the value

28
00:01:26,000 --> 00:01:28,000
that's currently stored in EnteredBody

29
00:01:28,000 --> 00:01:32,000
so that our current state value is output down there.

30
00:01:34,000 --> 00:01:37,000
That's amazing and great and theoretically

31
00:01:37,000 --> 00:01:40,000
that's a good approach but now we have the state

32
00:01:40,000 --> 00:01:42,000
in the right place, but the event

33
00:01:42,000 --> 00:01:44,000
is in a different component.

34
00:01:45,000 --> 00:01:47,000
So how can we solve this puzzle?

35
00:01:47,000 --> 00:01:49,000
We either have the state or the event

36
00:01:49,000 --> 00:01:51,000
in the wrong component.

37
00:01:51,000 --> 00:01:53,000
Well, what we have to do here

38
00:01:53,000 --> 00:01:55,000
and what we already started doing

39
00:01:55,000 --> 00:01:58,000
is something that's called lifting the state up.

40
00:01:59,000 --> 00:02:03,000
If you have state that's manipulated in component A

41
00:02:03,000 --> 00:02:08,000
but needed in component B, you should lift the state

42
00:02:08,000 --> 00:02:10,000
up to a component that has access

43
00:02:10,000 --> 00:02:13,000
to both components that need the state.

44
00:02:14,000 --> 00:02:17,000
So in this case, it's the PostsList component

45
00:02:17,000 --> 00:02:21,000
that needs the state to pass it to post

46
00:02:21,000 --> 00:02:23,000
as a value for the body prop.

47
00:02:23,000 --> 00:02:26,000
And it's also the PostsList component that has access

48
00:02:26,000 --> 00:02:28,000
to the NewPost component

49
00:02:28,000 --> 00:02:31,000
which is the place where the state should be manipulated.

50
00:02:32,000 --> 00:02:34,000
Now what we can do in this case

51
00:02:34,000 --> 00:02:36,000
is we can get rid of the state here

52
00:02:36,000 --> 00:02:39,000
in NewPost

53
00:02:39,000 --> 00:02:41,000
and get rid of the event handler function

54
00:02:41,000 --> 00:02:45,000
and the useState import as well.

55
00:02:45,000 --> 00:02:48,000
And we could now simply use this props feature.

56
00:02:48,000 --> 00:02:50,000
So this props object, which we get

57
00:02:50,000 --> 00:02:53,000
by React automatically

58
00:02:53,000 --> 00:02:56,000
to set this onChange event listener prop

59
00:02:56,000 --> 00:02:59,000
equal to, for example,

60
00:02:59,000 --> 00:03:00,000
props.onBodyChange.

61
00:03:03,000 --> 00:03:05,000
Now this prop name is up to you

62
00:03:05,000 --> 00:03:08,000
because you can set any props you want

63
00:03:08,000 --> 00:03:10,000
on your own components.

64
00:03:11,000 --> 00:03:14,000
With that prop being set like this

65
00:03:14,000 --> 00:03:17,000
on the onChange prop of text area,

66
00:03:17,000 --> 00:03:22,000
we can go to PostsList and on NewPost

67
00:03:22,000 --> 00:03:25,000
we can now add the onBodyChange

68
00:03:27,000 --> 00:03:28,000
prop here

69
00:03:28,000 --> 00:03:30,000
to the NewPost component.

70
00:03:31,000 --> 00:03:35,000
And as a value we can now again pass in a function

71
00:03:35,000 --> 00:03:38,000
that should be called when the text area changes.

72
00:03:38,000 --> 00:03:41,000
So when the change even occurs on the text area.

73
00:03:41,000 --> 00:03:42,000
In this case, for example

74
00:03:42,000 --> 00:03:44,000
the bodyChangeHandler

75
00:03:45,000 --> 00:03:49,000
where we automatically get the event object as before,

76
00:03:49,000 --> 00:03:51,000
and where we then call set EnteredBody

77
00:03:51,000 --> 00:03:55,000
equal to event.target.value

78
00:03:55,000 --> 00:03:58,000
and it's then the bodyChangeHandler function

79
00:03:58,000 --> 00:04:02,000
which is passed as a value to onBodyChange, to this prop.

80
00:04:04,000 --> 00:04:06,000
Now this might be confusing at first

81
00:04:06,000 --> 00:04:09,000
but what I'm doing here is I'm passing this

82
00:04:09,000 --> 00:04:12,000
bodyChangeHandler function to onBodyChange.

83
00:04:12,000 --> 00:04:15,000
So we're not executing it here, we have no parenthesis.

84
00:04:15,000 --> 00:04:18,000
Instead, I'm using this function bodyChangeHandler

85
00:04:18,000 --> 00:04:23,000
as a value that's passed to the onBodyChange prop.

86
00:04:25,000 --> 00:04:26,000
Now in the NewPost component,

87
00:04:26,000 --> 00:04:30,000
I'm then in the end forwarding that value

88
00:04:30,000 --> 00:04:33,000
that's received on the onBodyChange prop

89
00:04:33,000 --> 00:04:37,000
as a value to the onChange prop of text area.

90
00:04:37,000 --> 00:04:40,000
So we simply pass that function,

91
00:04:40,000 --> 00:04:42,000
that bodyChangeHandler function,

92
00:04:42,000 --> 00:04:44,000
through the NewPost component

93
00:04:44,000 --> 00:04:47,000
with help of the onBodyChange prop

94
00:04:47,000 --> 00:04:49,000
to the text area component.

95
00:04:50,000 --> 00:04:53,000
And this should all be quite a bit less confusing

96
00:04:53,000 --> 00:04:56,000
if you keep in mind that functions can be used

97
00:04:56,000 --> 00:05:00,000
just like any other kind of value in JavaScript.

98
00:05:03,000 --> 00:05:04,000
So therefore, in the end here,

99
00:05:04,000 --> 00:05:08,000
we wire up this bodyChangeHandler function

100
00:05:08,000 --> 00:05:11,000
to this change event on text area.

101
00:05:11,000 --> 00:05:13,000
That's why we also still get this event object.

102
00:05:13,000 --> 00:05:18,000
And with that we can now update the state in the component

103
00:05:18,000 --> 00:05:21,000
where we need it while still setting the listener

104
00:05:21,000 --> 00:05:24,000
in the component where the event occurs.

105
00:05:25,000 --> 00:05:27,000
And of course, we can also do that

106
00:05:27,000 --> 00:05:29,000
with the author input.

107
00:05:29,000 --> 00:05:31,000
There, we can add the default onChange prop

108
00:05:31,000 --> 00:05:35,000
to add a change event listener to that input as well.

109
00:05:35,000 --> 00:05:39,000
And for example, expect to get a function value

110
00:05:39,000 --> 00:05:41,000
on the onAuthor change prop.

111
00:05:42,000 --> 00:05:44,000
Again, this prop name is up to you

112
00:05:44,000 --> 00:05:47,000
because it's your component.

113
00:05:47,000 --> 00:05:51,000
But with this prop chosen here inside of NewPost

114
00:05:51,000 --> 00:05:53,000
we now have to use the same prop name here

115
00:05:53,000 --> 00:05:58,000
on the NewPost component in PostsList

116
00:05:58,000 --> 00:06:02,000
and then copy that bodyChangeHandler function

117
00:06:02,000 --> 00:06:06,000
and name this copy authorChangeHandler, for example

118
00:06:06,000 --> 00:06:09,000
to then pass this authorChangeHandler function

119
00:06:09,000 --> 00:06:13,000
as a value to the on author change prop.

120
00:06:14,000 --> 00:06:16,000
And then again, that's picked up

121
00:06:16,000 --> 00:06:19,000
and used as a value for the onChange prop inside of

122
00:06:19,000 --> 00:06:21,000
that NewPost component.

123
00:06:23,000 --> 00:06:26,000
Now we just need to register a second state slice

124
00:06:26,000 --> 00:06:27,000
for that author name

125
00:06:27,000 --> 00:06:29,000
and that is something you can do.

126
00:06:29,000 --> 00:06:33,000
You're not limited to one single state per component.

127
00:06:33,000 --> 00:06:36,000
Instead you can have as many state values as you need.

128
00:06:37,000 --> 00:06:41,000
So here we can simply call useState again to register

129
00:06:41,000 --> 00:06:44,000
a second state value for this component.

130
00:06:44,000 --> 00:06:47,000
And this also is an empty string initially,

131
00:06:47,000 --> 00:06:50,000
but then we get back two values again

132
00:06:50,000 --> 00:06:55,000
or one value, one array with two elements to be precise.

133
00:06:55,000 --> 00:06:57,000
That's my entered author.

134
00:06:57,000 --> 00:07:00,000
And then my updating function, which could be called

135
00:07:00,000 --> 00:07:01,000
setEnteredAuthor.

136
00:07:03,000 --> 00:07:06,000
And whenever any of these two states changes,

137
00:07:06,000 --> 00:07:11,000
this PostsList component function will be executed again.

138
00:07:11,000 --> 00:07:15,000
In that case, the entire JSX code down there is evaluated

139
00:07:15,000 --> 00:07:18,000
again, which means that any nested component functions

140
00:07:18,000 --> 00:07:20,000
are also executed again.

141
00:07:20,000 --> 00:07:24,000
And that leads to precisely the behavior we want

142
00:07:24,000 --> 00:07:27,000
because that means that this post

143
00:07:27,000 --> 00:07:30,000
where we pass our updated state values

144
00:07:30,000 --> 00:07:34,000
as values for its props to that post component function,

145
00:07:34,000 --> 00:07:38,000
this post component function will also be executed again

146
00:07:38,000 --> 00:07:41,000
if PostsList executes again

147
00:07:41,000 --> 00:07:43,000
and therefore these updated values

148
00:07:43,000 --> 00:07:47,000
which we pass as values to props to this component

149
00:07:47,000 --> 00:07:51,000
will be reflected in the JSX code of that component

150
00:07:51,000 --> 00:07:55,000
and hence the UI will be updated accordingly as well.

151
00:07:55,000 --> 00:08:00,000
So that's how UI updates work with help of React and state.

152
00:08:00,000 --> 00:08:03,000
So therefore here I now wanna pass my enteredAuthor

153
00:08:03,000 --> 00:08:06,000
as a value for the author prop

154
00:08:06,000 --> 00:08:07,000
for this first post component.

155
00:08:09,000 --> 00:08:11,000
And then here in authorChangeHandler,

156
00:08:11,000 --> 00:08:16,000
I call setEnteredAuthor and pass event.target.value

157
00:08:16,000 --> 00:08:17,000
as a value.

158
00:08:18,000 --> 00:08:21,000
With that done, we just have to go to NewPost

159
00:08:21,000 --> 00:08:24,000
and get rid of this paragraph with EnteredBody

160
00:08:24,000 --> 00:08:28,000
in there because we no longer have the EnteredBody state

161
00:08:28,000 --> 00:08:29,000
in that component.

162
00:08:30,000 --> 00:08:32,000
And if you then save everything,

163
00:08:32,000 --> 00:08:36,000
you see that this component is empty by default,

164
00:08:36,000 --> 00:08:40,000
which should make sense because our default states

165
00:08:40,000 --> 00:08:43,000
for EnteredBody and enteredAuthor are empty strings.

166
00:08:44,000 --> 00:08:48,000
But as soon as I start typing something here

167
00:08:48,000 --> 00:08:52,000
into these input fields, you see that the component down

168
00:08:52,000 --> 00:08:57,000
there gets updated dynamically with every key stroke

169
00:08:57,000 --> 00:09:02,000
because of state and because we lifted state up

170
00:09:02,000 --> 00:09:05,000
into a place where we can update and use it.