1
00:00:02,000 --> 00:00:04,000
So we're gathering that post data.

2
00:00:04,000 --> 00:00:07,000
How can we now add that as a post to a list

3
00:00:07,000 --> 00:00:11,000
of posts that should then be output dynamically here instead

4
00:00:11,000 --> 00:00:14,000
of outputting this hard coded post here?

5
00:00:14,000 --> 00:00:17,000
Well, in the end, again, by using what we already know,

6
00:00:17,000 --> 00:00:20,000
plus two new concepts or features.

7
00:00:21,000 --> 00:00:25,000
In the end we have to get this post data

8
00:00:25,000 --> 00:00:29,000
from the new post component to the post's list component.

9
00:00:29,000 --> 00:00:31,000
And there we then should manage some state which

10
00:00:31,000 --> 00:00:34,000
in the end manages a list of posts.

11
00:00:34,000 --> 00:00:37,000
And whenever that list changes we wanna update the list

12
00:00:37,000 --> 00:00:39,000
for outputting down there.

13
00:00:40,000 --> 00:00:44,000
Therefore, we can useState here and import useState

14
00:00:44,000 --> 00:00:47,000
from React in the post list component

15
00:00:47,000 --> 00:00:50,000
and pass an MT array as an initial value.

16
00:00:51,000 --> 00:00:56,000
And that then should be our posts array

17
00:00:57,000 --> 00:01:00,000
with a setPosts state updating function.

18
00:01:01,000 --> 00:01:04,000
So the idea is that here we manage a list

19
00:01:04,000 --> 00:01:06,000
of posts and that list should be edited

20
00:01:06,000 --> 00:01:09,000
whenever we submit a new post.

21
00:01:09,000 --> 00:01:11,000
So therefore, we also must add a function here

22
00:01:11,000 --> 00:01:15,000
in posts list, which adds a new post.

23
00:01:15,000 --> 00:01:17,000
And that could be the addPostHandler function

24
00:01:17,000 --> 00:01:21,000
and I name it addPostHandler, because in the end,

25
00:01:21,000 --> 00:01:24,000
again it should be triggered whenever the form is submitted

26
00:01:24,000 --> 00:01:25,000
in the end.

27
00:01:26,000 --> 00:01:28,000
Now here we could expect to get some postData

28
00:01:30,000 --> 00:01:34,000
and then we wanna update our post state with set posts here

29
00:01:35,000 --> 00:01:40,000
and in the end, pass a new post object to this array.

30
00:01:40,000 --> 00:01:43,000
Now for that, what we could do is pass a new array

31
00:01:43,000 --> 00:01:48,000
as a new state value to set posts and then add post data

32
00:01:48,000 --> 00:01:51,000
as a new value to that array and to make sure

33
00:01:51,000 --> 00:01:55,000
that any potentially existing posts aren't lost.

34
00:01:55,000 --> 00:02:00,000
We could use this spread operator, a default operator built

35
00:02:00,000 --> 00:02:03,000
into JavaScript to spread our existing posts

36
00:02:03,000 --> 00:02:05,000
into this new array of posts so

37
00:02:05,000 --> 00:02:08,000
that we add this new post as the first element

38
00:02:08,000 --> 00:02:11,000
in this array and the existing posts come thereafter.

39
00:02:13,000 --> 00:02:17,000
This is not optimal, but it will work.

40
00:02:17,000 --> 00:02:18,000
So now we just have to make sure

41
00:02:18,000 --> 00:02:21,000
that the addPostHandler is executed

42
00:02:21,000 --> 00:02:24,000
as the form is submitted.

43
00:02:24,000 --> 00:02:28,000
For that, we can pass this addPostHandler function

44
00:02:28,000 --> 00:02:31,000
with help of a prop to the new post component.

45
00:02:31,000 --> 00:02:36,000
So we could add a prop called onAddPost and set the value

46
00:02:36,000 --> 00:02:40,000
of that prop to the addPostHandler function we just added.

47
00:02:42,000 --> 00:02:44,000
And in that the new post component,

48
00:02:44,000 --> 00:02:46,000
we can now use the onAddPost prop,

49
00:02:46,000 --> 00:02:49,000
again using the same mechanism we've used over

50
00:02:49,000 --> 00:02:53,000
and over again to accept that prop here

51
00:02:53,000 --> 00:02:56,000
and destructure it from this props object

52
00:02:57,000 --> 00:03:01,000
and in submit handler before calling on cancel,

53
00:03:01,000 --> 00:03:03,000
we can now call on at post.

54
00:03:03,000 --> 00:03:06,000
Since this again is a prop yielding a function

55
00:03:06,000 --> 00:03:08,000
and passing the post data

56
00:03:08,000 --> 00:03:12,000
to this function and this function that is executed

57
00:03:12,000 --> 00:03:15,000
in the end is this addPostHandler function.

58
00:03:16,000 --> 00:03:19,000
So this will now add this post to this array of posts.

59
00:03:19,000 --> 00:03:22,000
But as I mentioned, this code here isn't ideal

60
00:03:24,000 --> 00:03:27,000
because there is a rule if you update state and

61
00:03:27,000 --> 00:03:32,000
that new state is based on that previous state value

62
00:03:32,000 --> 00:03:35,000
as it's the case here where the new state is based

63
00:03:35,000 --> 00:03:40,000
on the existing posts you should actually pass a function

64
00:03:40,000 --> 00:03:44,000
to set posts for example, an arrow function.

65
00:03:44,000 --> 00:03:47,000
And this function here will be called automatically

66
00:03:47,000 --> 00:03:51,000
by React whenever you call set posts.

67
00:03:52,000 --> 00:03:54,000
And this function will automatically

68
00:03:54,000 --> 00:03:58,000
receive the current state snapshot, so the existing posts

69
00:03:58,000 --> 00:04:01,000
and you should then return the new state value

70
00:04:01,000 --> 00:04:02,000
where you could, for example,

71
00:04:02,000 --> 00:04:07,000
again add your post data and spread the existing posts.

72
00:04:08,000 --> 00:04:11,000
Now this looks very similar to what we had before

73
00:04:11,000 --> 00:04:14,000
but it's the technically better way of updating your state

74
00:04:14,000 --> 00:04:18,000
if it depends on the previous state snapshot.

75
00:04:18,000 --> 00:04:22,000
The reason for data is that internally React does actually

76
00:04:22,000 --> 00:04:26,000
not execute your state updating functions instantly.

77
00:04:26,000 --> 00:04:29,000
At least it's not guaranteed that it will do so.

78
00:04:29,000 --> 00:04:32,000
But it schedules those state updates and

79
00:04:32,000 --> 00:04:35,000
in case you have multiple state updates after each other,

80
00:04:35,000 --> 00:04:38,000
you could potentially update your state based

81
00:04:38,000 --> 00:04:40,000
on some old state or anything like that.

82
00:04:40,000 --> 00:04:42,000
And therefore, this way is a way

83
00:04:42,000 --> 00:04:45,000
of making sure that React ensures

84
00:04:45,000 --> 00:04:47,000
that you get the latest correct state

85
00:04:47,000 --> 00:04:49,000
for this state update even

86
00:04:49,000 --> 00:04:53,000
if you have multiple pending state updates.

87
00:04:53,000 --> 00:04:55,000
So therefore, it's this simple rule.

88
00:04:55,000 --> 00:04:57,000
If the new state depends on the old state,

89
00:04:57,000 --> 00:04:59,000
then you should use this function form

90
00:04:59,000 --> 00:05:01,000
for updating the state.

91
00:05:01,000 --> 00:05:03,000
You get the old state automatically, you can use it

92
00:05:03,000 --> 00:05:07,000
and you should return the new state then as a value.

93
00:05:07,000 --> 00:05:09,000
And you can use the old state if you need to

94
00:05:09,000 --> 00:05:11,000
as it's the case here.

95
00:05:11,000 --> 00:05:14,000
And this does not just apply if your state is an array

96
00:05:14,000 --> 00:05:18,000
but whenever your new state depends on the old state.

97
00:05:18,000 --> 00:05:21,000
And with that, we're managing this list of posts.

98
00:05:21,000 --> 00:05:24,000
How can we now output it down there

99
00:05:24,000 --> 00:05:28,000
and render one post component per post item in this array?