As we saw at the end the last video we can definitely sign up for an account.
But if we enter in some invalid input we get back in a response but we don't actually show anything
on the form about it.
So in this video we're gonna make sure that we capture errors during the sign up request and display
them on the screen to do so.
I'm gonna go back over to my editor I'm gonna find that on submit handler and to capture the error that
comes back I'm going to wrap this request right here inside of a try patch statement
and I'll fix up some indentation.
So now if anything goes wrong with this request we'll be kicked down to the catch statement and he failed
requests will show up as heir right here let's just do a console log of this error thing and get a better
idea of what data actually exists inside of it so I can do a console log of E R dot response dot data
let's just console log that for right now.
OK I'm going to save the file look back over and I'll once again enter in an invalid email and a invalid
password
all sent to sign up.
Now I can see that whenever I console log out risk error response stock data I get back that response
so we sent back inside of all of our standardized error handling stuff so it is a array of errors inside
of a errors object and that array of errors every error has a message and possibly a field.
So in order to communicate some validation error to the user we really just want to get a handle on
this errors array we can then iterate over the errors array and for every message inside of here we
can somehow just render it out on the screen so that the user knows that something just went wrong.
Let's try that out back inside my editor.
I'm going to go back up to the top and I'm going to add in a new piece of state.
I'm going to call this errors and be set errors setter.
I'm going to default this to be an empty array then whenever we get some kind of error in the response
it comes back rather than doing a console log we're going to instead call it set errors and we'll set
it to ya response data not errors so remember that's gonna be our array of errors that has those objects
with a message and possibly the field property we can delete the console log.
Now it's now down inside of our form we can attempt to map over or iterate over this arrays array right
here.
And for every error message we'll simply show an heir to the user.
So back down here right above the button I'm going gonna add on a mapping statement.
Don't say errors dot map
and right now I'll just take each air they'll abbreviate as Ja and I will return your message.
Will start simple.
Let's just get some text to show up I'm gonna save this.
Look back over and now if I attempt to submit the form without an e-mail or even a password I should
see something like that right there.
Now we're just taking the message off of each error and printing it up onto the screen.
Let's definitely work but we probably want some better formatting to what we have right here.
So let's go back over and fix up this mapping statement just a little bit.
I'm going to add in around this Ayres thing a div that has a class name of alert and alert dash danger
then inside that div I'm going to add in an H for and I'm going to give it some text like whoops just
to indicate that something went wrong after the H four.
I'm going to display a well that has a class name of my dash zero and I'll close off the well on the
other side
then as I'm mapping over these errors I'm gonna make sure that I wrap each of these error messages inside
of an L I element.
So I'll put in an ally and whenever.
Remember we show a array of elements using react.
We have to provide a key property to these elements that are being built inside the list the requirements
of that key property are just that it is some unique key or some unique value.
So we could simply use the error message itself as the key It's on the ELA itself.
I'll add in a prop up key and I'll set that equal to your r dot message.
Like so let's say this plot back over into a quick test.
Now naturally when we first load up the application we see this red box right here because right now
we don't have anything saying oh show or don't show this thing.
So we will have to wrap this entire div with some logic to decide whether or not to show it.
But right now let's just make sure that we can capture the error messages and show them on the screen.
I'll go ahead and attempt to sign up and I think I forgot something probably forgot those curly braces
around York message.
That's better.
Now if I sign up there we go.
So I see.
Email must be valid and password must be between four and twenty characters.
Now naturally it would be better to show this validation information right next to right underneath
each of these input elements.
That is why we put on that field property on each of these air objects.
So remember every air object has a message and possibly the field property so he could take a look at
that field property and use it to look up these different errors and then put them right underneath
the appropriate input.
But that was just a little bit too much on the react side for the context of this course.
So I just I just keep it simple.
This is pretty much good enough.
The last thing that we need to do is make sure that we only show this entire div if there actually are
some errors that are going to take the entire div I'm going to wrap with a set of curly braces then
right in front of a div.
We're gonna add in errors dot length greater than zero and then the div itself.
So as long as we have more than one error let's show that div again then save this.
I'm going to flip back over now.
I don't see anything at all by default.
But as soon as I have some errors I see the div start to appear.
OK.
So that definitely looks good now.
Although this is a reasonable implementation right here I just want to point out that this kind of validation
and error displaying logic and even the request logic we have up here is something we're probably going
to repeat many times throughout this application.
We have many different forms we need to put together.
Not only do we have to put together some forms for sign in but we also need to eventually create some
forms for say creating an order or creating a ticket or editing a ticket so without a doubt a lot of
logic that we just wrote out is going to have to be repeated several times over our project.
So then minds.
Let's take a pause right now.
We're going to come back the next video and we're going to try to extract a lot of this logic around
making request into some kind of helper function.