So let's now talk to that API route
from our front end.
Here we got the ContactForm and it's probably here
where we wanna talk to our backend.
First of all, we need to add a function
which is triggered when the form is submitted.
So I'll add a new nested function in this component
the sendMessageHandler function
which will get to the default event object
and which should call event.preventDefault
to prevent the browser default
where we would basically reload the page
because the browser automatically sends a request
which we don't want here.
So prevent that default
and then connect my sendMessageHandler
to onSubmit, like this.
Now in here, we wanna send that HTTP request.
We wanna send that HTTP request to our API route.
And we can do this with the good old fetch function
which is built into the browser.
We could also use a third party package like access.
Now here, we need to pass into URL
to which we wanna send the request.
We can omit the domain because we're using a API route
which will be hosted
by the same server as our pages are hosted on.
So we can just add a absolute path to /API/contact.
/API/contact because we named the file contact
in that special API folder.
Now, we also need to pass that second argument to fetch
to configure the request
because we don't wanna use the default
which would be a get request with no data.
But instead we want to post request
with the submitted data.
So, set this here to post
and then also add a body.
Now for the body,
we need to extract the entered data, first of all,
and we can use refs for that,
as we did it before in the course,
or to mix things up here,
we use state and two-way binding
and I'll do the latter simply just to see this alternative.
So I'll not set the body for now,
and instead in the ContactForm component,
I'll now use the useState hook
which is imported from react to manage state
for the different inputs,
initially an empty string for every input,
but then here we have the enteredEmail state
and setEnteredEmail.
And I replicate this twice
to also have my entered name, state
and the set entered,
name, state updating function
and the entered message state and setEnteredMessage.
Alternatively, we could also use one state
which is an object and has a email name and message field.
That is up to you.
And that is just standard react.
So now we've got that.
Now we need to bind this.
So here on this first input,
all now set value equal to entered email,
to pass the currently stored value
in this state back into the input,
but then also add the onChange prop to listen to changes.
And here I'll add a quick inline function
where we get the default event object automatically
and then call sentEnteredEmail
and set this equal to event.target.value.
That will give us access to the currently entered value.
And we can now repeat that on all the inputs.
So here on this input for the name, it's the entered name
which you wanna bind and onChange,
we wanna set the entered name therefore.
And for the text area, we can do the same,
value is set to enteredMessage.
Nope, enteredMessage.
And we set the entered message, entered message.
So for text area, you also set the value prop.
You don't add it between the text area text
just to make this clear.
So now I'm using this two-way binding
to have the entered data
in those state values
and therefore now,
when we add a body here
to our outgoing request, we want a JSON stringify,
an object with that entered data.
Now we can also add client side validation here
and simply check the entered values
before they are submitted
and possibly show an error message to the user.
But we already have some basic validation
because we added their required attribute here.
So that will make sure that it can't be empty anyways.
We should add this to the text area as well.
And we already do all the validate
on the server as we should.
And hence, I won't add another layer of validation here.
But you could, because of course,
with client side JavaScript based validation,
you have full control
over which error messages
you might want to show and so on
but I will omit it here.
It's optional.
And hence here, I'll just construct the object
which will be sent to the server,
and that is a object converted to JSON
which has a email field,
which contains the enteredEmail,
which has a name field, which contains the enteredName
and which has a message field
which contains the enteredMessage.
And you have to make sure
that the field names you choose here,
email name and message, of course,
map the field names you expect
in your API route function.
Here, I'm trying to extract email, name and message.
So these should be the identifiers I set here,
email, name and message.
With that resetting this,
last but not least,
I'll also add a header
and set the content type header to application JSON
to make the backend aware
of the fact that this request will carry JSON data
and hence it can be parsed correctly by the backend.
This now sends the request.
We're not doing anything else,
not working with the response,
we're handling errors,
but the request should be sent now.
And therefore let's now save everything
and let's give it a try.
Let's reload this contact page
and fill out this form with some dummy data,
"Does this work?" and click Send Message.
Now we don't get any feedback here,
but if we go back to the terminal
where we run our dev server,
so where all the server side code executes,
we should see this output,
this log which comes
from our API route here,
where we lock the message.
So the data does arrive successfully on the server.
And now that that's the case,
we only got two main steps left,
two main tasks which we have to tackle.
We probably wanna show some feedback to the user
on the front end like a notification when the request
is on its way and when it succeeded or when it failed.
And of course, we wanna store the data
in the actual database.
Now let's start with the database in the next lecture
and then add better client side feedback thereafter.