So, how can we now handle form submission?
And what should happen when the form is submitted?
Well, in that case, I of course
also wanna close the model.
But I also wanna get the two values that were entered
and in the end add them to my list of posts.
And the list of posts should then
also be output dynamically
instead of having these two pseudo hard coded posts here.
So let's handle this step by step.
First of all, in the NewPost component,
on this form element, we should add an event listener,
a new prop called onSubmit to listen to the default
submit event, which is a default event
supported by the browser out of the box.
Now we need a function that should be executed
when that submit event occurs.
And I wanna have that function in the place
where I also collect the values that are entered.
Now in my case here, these values are managed in PostsList
but actually we don't need to do that there anymore.
I'll instead bring them back down to NewPost,
to the NewPost component.
So I bring my state slices back there,
and therefore here we now import useState from React again.
And I don't need these state slices
in the parent component,
in the PostsList component anymore
because I don't want to use them for setting my post author
and body here anymore.
Instead, I'll get rid of that post for the moment
and soon I wanna dynamically render
a list of posts here anyways.
So therefore, we can also get rid
and we must get rid of onBodyChange and onAuthorChange
on the NewPost component.
And to clean things up, I'll also get rid
of that code here and PostsList
therefore is now much leaner.
But in the NewPost component,
I now wanna call bodyChangeHandler again
if my text area changes.
So I will set bodyChangeHandler as a value
for the onChange prop here on text area.
And for input, onChange,
I'll set this to authorChangeHandler
so that in the end these entered values
are managed as state in the NewPost component again.
And these two props, onBodyChange and onAuthorChange
are not needed here anymore.
Now we also must add a function that should be triggered
when the form is submitted.
So I'll add a new function here.
SubmitHandler could be the name.
And this function is passed as a value to onSubmit.
Now here, just as with the other event handler functions,
we get an event object automatically
since it's set to onSubmit.
So to this default submit event.
And now we gotta do one important thing here
for this submit event because as I mentioned before
when a form is submitted, this submit event
will be triggered and the browser will automatically
generate and send an HTTP request.
And we don't want that here
because sending an HTTP request to the server
that's serving this React app would in the end
lead to the page being reloaded
and we have no server site code here
that would handle that request.
React is a front end library running in the browser
not on the server.
It can't handle that request.
Therefore, we have to use this event object
and call the built-in preventDefault method
written like this.
This prevents the browser default
of generating and sending an HTTP request.
With that done, we can then thereafter collect and group
the entered body and entered author values
into a postData object, for example.
A default JavaScript object where I add a body property,
which can be set to enteredBody
and an author property which can be set to enteredAuthor.
We could also add some client side validation here
and update some state to show an error or message
if invalid data was entered
but whilst that is something we do in the complete guide,
it's not something we'll do here in this crash course.
Instead, we'll just assume that the provider's data is valid
and we'll rely on the default browser validation added
with help of the required attribute.
And we therefore now got our post data here.
And now that post data in the end should be added
to a list of posts which should then actually be rendered
as a list of post components onto the screen.
And that's what we'll do next.
This is however, how we can handle form submission
and we can see that it works
if we then console log our post data here
like this in the submitHandler.
If you save all your code and you make sure
that the model is open
and you open the developer tools thereafter,
you can enter something there.
And as you click Submit, you get this object here
with those entered values.
So that's working.
And now I just wanna make sure that this model gets closed
if I submit this, so therefore thereafter
I'll call onCancel as a function like this.
Keep in mind onCancel is this prop which receives a function
as a value and therefore we can execute it
as a function here hence executing that function
that is received as a value on the onCancel prop.
And that function simply turns out
to be that hideModalHandler function.
So that's the function we're in the end executing here.
So with that, if we try this again and click Submit,
now the modal closes.
So let's now make sure we output that list of posts.