So let's now make sure
that we actually have a form
where we have a submit button,
and maybe also a cancel button
to cancel editing and close the modal,
but that we have a submit button
which when pressed adds a new post
and our list or our grid of posts
then keeps on growing as we add more posts.
To achieve this, back in the new post component
we first of all have to add some buttons there.
For this, here at the end of the form,
we can add a new paragraph
which should receive a class name of classes-dot-actions.
Since I prepared a class named actions,
in the CSS file which then,
will style these buttons accordingly.
Now, in this newly added paragraph
we should add two buttons.
Now the second button will have a caption of submit.
The first button will have a caption of cancel.
However, by default, if you add buttons to a form,
if they are pressed, they will submit that form.
This means that a submit event will be generated
and also that by default the browser will generate
and send an HTTP request
to the server that's serving the website.
Now we don't want that,
and we'll prevent it therefore,
because we want to handle the input
with our client side code instead
with React instead not with server side code here.
But besides that, I also want to make sure
that not both buttons submit the form,
instead only the submit button should do so,
not the cancel button.
To make sure that the cancel button
does not trigger form submission,
we can and should give it a type attribute
which we set to button.
The alternative which we can set
on the submit button is type submit.
But this is not required since status to default anyways.
Now this button button here,
will now not submit the form when clicked.
Instead, it should close the form
and to ensure that it does,
I'll accept a new prop here.
And I'll actually also use
Object Destructuring here to
get my on-body-change and
on-author-change prop so
that we can get rid of props-dot
here in these two places.
But I'll now also accept a new prop as mentioned
which could be named on-cancel. Name is up to you.
But I do expect to get a function on this prop
because I want to connect it to the on-click prop here,
so that in the end, an event listener
is set up triggering the function,
which will be received on the on-cancel prop.
Now this on-cancel prop therefore must be set here
on the new post component
and it should be set to a function
that will close that modal.
Now for that we have the on-stop-posting prop
which we're already receiving here on posts-list,
which if you remember, will in the end
trigger hide-modal-handler,
which is exactly what should get triggered,
so I can reuse the on-stop-posting prop here
and set it as a value for the on-cancel prop.
So with that, if we save everything
and we open our modal, we now got these buttons
and if I click cancel the modal closes.
But now let's make sure
that we can also submit that form.