1
00:00:02,000 --> 00:00:05,000
So, how can we now handle form submission?

2
00:00:05,000 --> 00:00:08,000
And what should happen when the form is submitted?

3
00:00:08,000 --> 00:00:10,000
Well, in that case, I of course

4
00:00:10,000 --> 00:00:11,000
also wanna close the model.

5
00:00:11,000 --> 00:00:16,000
But I also wanna get the two values that were entered

6
00:00:16,000 --> 00:00:19,000
and in the end add them to my list of posts.

7
00:00:19,000 --> 00:00:21,000
And the list of posts should then

8
00:00:21,000 --> 00:00:24,000
also be output dynamically

9
00:00:24,000 --> 00:00:29,000
instead of having these two pseudo hard coded posts here.

10
00:00:30,000 --> 00:00:33,000
So let's handle this step by step.

11
00:00:33,000 --> 00:00:35,000
First of all, in the NewPost component,

12
00:00:35,000 --> 00:00:39,000
on this form element, we should add an event listener,

13
00:00:39,000 --> 00:00:43,000
a new prop called onSubmit to listen to the default

14
00:00:43,000 --> 00:00:46,000
submit event, which is a default event

15
00:00:46,000 --> 00:00:49,000
supported by the browser out of the box.

16
00:00:49,000 --> 00:00:52,000
Now we need a function that should be executed

17
00:00:52,000 --> 00:00:54,000
when that submit event occurs.

18
00:00:55,000 --> 00:00:58,000
And I wanna have that function in the place

19
00:00:58,000 --> 00:01:02,000
where I also collect the values that are entered.

20
00:01:02,000 --> 00:01:06,000
Now in my case here, these values are managed in PostsList

21
00:01:06,000 --> 00:01:10,000
but actually we don't need to do that there anymore.

22
00:01:10,000 --> 00:01:14,000
I'll instead bring them back down to NewPost,

23
00:01:14,000 --> 00:01:16,000
to the NewPost component.

24
00:01:16,000 --> 00:01:19,000
So I bring my state slices back there,

25
00:01:20,000 --> 00:01:25,000
and therefore here we now import useState from React again.

26
00:01:26,000 --> 00:01:28,000
And I don't need these state slices

27
00:01:28,000 --> 00:01:30,000
in the parent component,

28
00:01:30,000 --> 00:01:32,000
in the PostsList component anymore

29
00:01:32,000 --> 00:01:37,000
because I don't want to use them for setting my post author

30
00:01:37,000 --> 00:01:39,000
and body here anymore.

31
00:01:39,000 --> 00:01:41,000
Instead, I'll get rid of that post for the moment

32
00:01:41,000 --> 00:01:43,000
and soon I wanna dynamically render

33
00:01:43,000 --> 00:01:45,000
a list of posts here anyways.

34
00:01:47,000 --> 00:01:48,000
So therefore, we can also get rid

35
00:01:48,000 --> 00:01:53,000
and we must get rid of onBodyChange and onAuthorChange

36
00:01:53,000 --> 00:01:54,000
on the NewPost component.

37
00:01:55,000 --> 00:01:58,000
And to clean things up, I'll also get rid

38
00:01:58,000 --> 00:02:00,000
of that code here and PostsList

39
00:02:00,000 --> 00:02:02,000
therefore is now much leaner.

40
00:02:03,000 --> 00:02:05,000
But in the NewPost component,

41
00:02:05,000 --> 00:02:09,000
I now wanna call bodyChangeHandler again

42
00:02:09,000 --> 00:02:12,000
if my text area changes.

43
00:02:12,000 --> 00:02:15,000
So I will set bodyChangeHandler as a value

44
00:02:15,000 --> 00:02:17,000
for the onChange prop here on text area.

45
00:02:19,000 --> 00:02:21,000
And for input, onChange,

46
00:02:21,000 --> 00:02:23,000
I'll set this to authorChangeHandler

47
00:02:23,000 --> 00:02:25,000
so that in the end these entered values

48
00:02:25,000 --> 00:02:29,000
are managed as state in the NewPost component again.

49
00:02:29,000 --> 00:02:32,000
And these two props, onBodyChange and onAuthorChange

50
00:02:33,000 --> 00:02:34,000
are not needed here anymore.

51
00:02:36,000 --> 00:02:39,000
Now we also must add a function that should be triggered

52
00:02:39,000 --> 00:02:41,000
when the form is submitted.

53
00:02:42,000 --> 00:02:43,000
So I'll add a new function here.

54
00:02:43,000 --> 00:02:46,000
SubmitHandler could be the name.

55
00:02:46,000 --> 00:02:50,000
And this function is passed as a value to onSubmit.

56
00:02:51,000 --> 00:02:54,000
Now here, just as with the other event handler functions,

57
00:02:54,000 --> 00:02:57,000
we get an event object automatically

58
00:02:57,000 --> 00:02:58,000
since it's set to onSubmit.

59
00:02:58,000 --> 00:03:01,000
So to this default submit event.

60
00:03:01,000 --> 00:03:03,000
And now we gotta do one important thing here

61
00:03:03,000 --> 00:03:08,000
for this submit event because as I mentioned before

62
00:03:08,000 --> 00:03:11,000
when a form is submitted, this submit event

63
00:03:11,000 --> 00:03:15,000
will be triggered and the browser will automatically

64
00:03:15,000 --> 00:03:18,000
generate and send an HTTP request.

65
00:03:18,000 --> 00:03:20,000
And we don't want that here

66
00:03:20,000 --> 00:03:23,000
because sending an HTTP request to the server

67
00:03:23,000 --> 00:03:26,000
that's serving this React app would in the end

68
00:03:26,000 --> 00:03:29,000
lead to the page being reloaded

69
00:03:29,000 --> 00:03:31,000
and we have no server site code here

70
00:03:31,000 --> 00:03:34,000
that would handle that request.

71
00:03:34,000 --> 00:03:38,000
React is a front end library running in the browser

72
00:03:38,000 --> 00:03:39,000
not on the server.

73
00:03:39,000 --> 00:03:41,000
It can't handle that request.

74
00:03:42,000 --> 00:03:45,000
Therefore, we have to use this event object

75
00:03:45,000 --> 00:03:48,000
and call the built-in preventDefault method

76
00:03:48,000 --> 00:03:49,000
written like this.

77
00:03:50,000 --> 00:03:53,000
This prevents the browser default

78
00:03:53,000 --> 00:03:56,000
of generating and sending an HTTP request.

79
00:03:57,000 --> 00:04:02,000
With that done, we can then thereafter collect and group

80
00:04:02,000 --> 00:04:05,000
the entered body and entered author values

81
00:04:05,000 --> 00:04:08,000
into a postData object, for example.

82
00:04:08,000 --> 00:04:13,000
A default JavaScript object where I add a body property,

83
00:04:13,000 --> 00:04:15,000
which can be set to enteredBody

84
00:04:16,000 --> 00:04:20,000
and an author property which can be set to enteredAuthor.

85
00:04:22,000 --> 00:04:25,000
We could also add some client side validation here

86
00:04:25,000 --> 00:04:27,000
and update some state to show an error or message

87
00:04:27,000 --> 00:04:30,000
if invalid data was entered

88
00:04:30,000 --> 00:04:33,000
but whilst that is something we do in the complete guide,

89
00:04:33,000 --> 00:04:36,000
it's not something we'll do here in this crash course.

90
00:04:36,000 --> 00:04:40,000
Instead, we'll just assume that the provider's data is valid

91
00:04:40,000 --> 00:04:44,000
and we'll rely on the default browser validation added

92
00:04:44,000 --> 00:04:46,000
with help of the required attribute.

93
00:04:46,000 --> 00:04:49,000
And we therefore now got our post data here.

94
00:04:50,000 --> 00:04:53,000
And now that post data in the end should be added

95
00:04:53,000 --> 00:04:57,000
to a list of posts which should then actually be rendered

96
00:04:57,000 --> 00:05:01,000
as a list of post components onto the screen.

97
00:05:01,000 --> 00:05:03,000
And that's what we'll do next.

98
00:05:03,000 --> 00:05:06,000
This is however, how we can handle form submission

99
00:05:06,000 --> 00:05:08,000
and we can see that it works

100
00:05:08,000 --> 00:05:12,000
if we then console log our post data here

101
00:05:12,000 --> 00:05:14,000
like this in the submitHandler.

102
00:05:15,000 --> 00:05:18,000
If you save all your code and you make sure

103
00:05:18,000 --> 00:05:20,000
that the model is open

104
00:05:20,000 --> 00:05:22,000
and you open the developer tools thereafter,

105
00:05:22,000 --> 00:05:24,000
you can enter something there.

106
00:05:24,000 --> 00:05:27,000
And as you click Submit, you get this object here

107
00:05:27,000 --> 00:05:30,000
with those entered values.

108
00:05:30,000 --> 00:05:31,000
So that's working.

109
00:05:31,000 --> 00:05:34,000
And now I just wanna make sure that this model gets closed

110
00:05:34,000 --> 00:05:37,000
if I submit this, so therefore thereafter

111
00:05:37,000 --> 00:05:42,000
I'll call onCancel as a function like this.

112
00:05:43,000 --> 00:05:47,000
Keep in mind onCancel is this prop which receives a function

113
00:05:47,000 --> 00:05:50,000
as a value and therefore we can execute it

114
00:05:50,000 --> 00:05:54,000
as a function here hence executing that function

115
00:05:54,000 --> 00:05:58,000
that is received as a value on the onCancel prop.

116
00:05:58,000 --> 00:06:01,000
And that function simply turns out

117
00:06:01,000 --> 00:06:03,000
to be that hideModalHandler function.

118
00:06:03,000 --> 00:06:08,000
So that's the function we're in the end executing here.

119
00:06:08,000 --> 00:06:10,000
So with that, if we try this again and click Submit,

120
00:06:10,000 --> 00:06:13,000
now the modal closes.

121
00:06:13,000 --> 00:06:16,000
So let's now make sure we output that list of posts.