- [Instructor] In this video, we will look at
how to submit our new message to our back end.
So back in our new message component,
we still had the original axios.get call
from when we copied our messages component code.
We no longer need this created function,
but we can make use of this axios.get call.
So I'll copy that, and let's paste it
inside our submit function on line 35.
Then let's get rid of the entire created function.
Now, instead of calling axios.get,
we'll use axios.post.
And if we hover over, we can see that the method
expects a data parameter.
So after our URL, we'll send over this.messagebody.
But if we go back to our back end project,
and we take a look at our app.post end point,
we can see that we expect a message object
that has a message property.
And so sending the raw message this way won't work.
So let's create an object with a message property.
And then I'll also remove the initialization
we had set as a test on line 27.
I'll set that back to an empty string.
Let's save that and give it a try.
So I'll type in new, hit submit.
We're not getting any errors.
Let's see what happened in our network tab.
So we can see that the request payload
contained an object with a message property
and a value new, and the response was
that message sent back to us.
So it seems to be working.
Let's refresh to see if the new message shows.
And there it is.
Now it would be a lot better if when I type
in a new message and I hit submit,
it instantly shows up in our messages list.
One way to achieve that is to send the message
from our new message component
to our messages component, letting it know
that a new message was posted, and we'd like to display it.
So let's take a look at how to do that next.