1
00:00:01,020 --> 00:00:03,630
As we saw at the end the last video we can definitely sign up for an account.

2
00:00:03,700 --> 00:00:08,400
But if we enter in some invalid input we get back in a response but we don't actually show anything

3
00:00:08,400 --> 00:00:09,810
on the form about it.

4
00:00:09,810 --> 00:00:13,410
So in this video we're gonna make sure that we capture errors during the sign up request and display

5
00:00:13,410 --> 00:00:15,720
them on the screen to do so.

6
00:00:15,750 --> 00:00:20,490
I'm gonna go back over to my editor I'm gonna find that on submit handler and to capture the error that

7
00:00:20,490 --> 00:00:27,930
comes back I'm going to wrap this request right here inside of a try patch statement

8
00:00:31,180 --> 00:00:34,290
and I'll fix up some indentation.

9
00:00:34,320 --> 00:00:39,200
So now if anything goes wrong with this request we'll be kicked down to the catch statement and he failed

10
00:00:39,210 --> 00:00:45,440
requests will show up as heir right here let's just do a console log of this error thing and get a better

11
00:00:45,440 --> 00:00:52,340
idea of what data actually exists inside of it so I can do a console log of E R dot response dot data

12
00:00:52,550 --> 00:00:54,860
let's just console log that for right now.

13
00:00:55,120 --> 00:01:01,720
OK I'm going to save the file look back over and I'll once again enter in an invalid email and a invalid

14
00:01:01,720 --> 00:01:02,140
password

15
00:01:05,170 --> 00:01:06,630
all sent to sign up.

16
00:01:06,650 --> 00:01:13,370
Now I can see that whenever I console log out risk error response stock data I get back that response

17
00:01:13,380 --> 00:01:20,150
so we sent back inside of all of our standardized error handling stuff so it is a array of errors inside

18
00:01:20,150 --> 00:01:26,570
of a errors object and that array of errors every error has a message and possibly a field.

19
00:01:26,570 --> 00:01:30,950
So in order to communicate some validation error to the user we really just want to get a handle on

20
00:01:30,950 --> 00:01:36,320
this errors array we can then iterate over the errors array and for every message inside of here we

21
00:01:36,320 --> 00:01:40,510
can somehow just render it out on the screen so that the user knows that something just went wrong.

22
00:01:41,240 --> 00:01:45,610
Let's try that out back inside my editor.

23
00:01:45,650 --> 00:01:49,130
I'm going to go back up to the top and I'm going to add in a new piece of state.

24
00:01:49,340 --> 00:01:56,480
I'm going to call this errors and be set errors setter.

25
00:01:56,600 --> 00:02:02,450
I'm going to default this to be an empty array then whenever we get some kind of error in the response

26
00:02:02,450 --> 00:02:09,860
it comes back rather than doing a console log we're going to instead call it set errors and we'll set

27
00:02:09,860 --> 00:02:20,090
it to ya response data not errors so remember that's gonna be our array of errors that has those objects

28
00:02:20,090 --> 00:02:24,190
with a message and possibly the field property we can delete the console log.

29
00:02:24,190 --> 00:02:30,510
Now it's now down inside of our form we can attempt to map over or iterate over this arrays array right

30
00:02:30,510 --> 00:02:30,990
here.

31
00:02:30,990 --> 00:02:35,940
And for every error message we'll simply show an heir to the user.

32
00:02:36,200 --> 00:02:41,630
So back down here right above the button I'm going gonna add on a mapping statement.

33
00:02:41,860 --> 00:02:43,420
Don't say errors dot map

34
00:02:46,260 --> 00:02:53,310
and right now I'll just take each air they'll abbreviate as Ja and I will return your message.

35
00:02:53,440 --> 00:02:54,140
Will start simple.

36
00:02:54,140 --> 00:02:58,300
Let's just get some text to show up I'm gonna save this.

37
00:02:58,350 --> 00:03:04,390
Look back over and now if I attempt to submit the form without an e-mail or even a password I should

38
00:03:04,390 --> 00:03:06,120
see something like that right there.

39
00:03:06,130 --> 00:03:10,020
Now we're just taking the message off of each error and printing it up onto the screen.

40
00:03:10,060 --> 00:03:14,050
Let's definitely work but we probably want some better formatting to what we have right here.

41
00:03:14,090 --> 00:03:18,520
So let's go back over and fix up this mapping statement just a little bit.

42
00:03:18,540 --> 00:03:27,600
I'm going to add in around this Ayres thing a div that has a class name of alert and alert dash danger

43
00:03:31,780 --> 00:03:38,040
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

44
00:03:38,040 --> 00:03:41,500
to indicate that something went wrong after the H four.

45
00:03:41,500 --> 00:03:49,270
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

46
00:03:49,270 --> 00:03:49,740
other side

47
00:03:52,880 --> 00:03:57,560
then as I'm mapping over these errors I'm gonna make sure that I wrap each of these error messages inside

48
00:03:57,560 --> 00:03:59,150
of an L I element.

49
00:03:59,330 --> 00:04:03,550
So I'll put in an ally and whenever.

50
00:04:03,550 --> 00:04:06,750
Remember we show a array of elements using react.

51
00:04:06,760 --> 00:04:12,100
We have to provide a key property to these elements that are being built inside the list the requirements

52
00:04:12,100 --> 00:04:16,250
of that key property are just that it is some unique key or some unique value.

53
00:04:16,570 --> 00:04:21,300
So we could simply use the error message itself as the key It's on the ELA itself.

54
00:04:21,300 --> 00:04:25,820
I'll add in a prop up key and I'll set that equal to your r dot message.

55
00:04:25,820 --> 00:04:32,920
Like so let's say this plot back over into a quick test.

56
00:04:32,920 --> 00:04:37,060
Now naturally when we first load up the application we see this red box right here because right now

57
00:04:37,060 --> 00:04:40,510
we don't have anything saying oh show or don't show this thing.

58
00:04:40,510 --> 00:04:44,050
So we will have to wrap this entire div with some logic to decide whether or not to show it.

59
00:04:44,290 --> 00:04:49,150
But right now let's just make sure that we can capture the error messages and show them on the screen.

60
00:04:49,230 --> 00:04:54,810
I'll go ahead and attempt to sign up and I think I forgot something probably forgot those curly braces

61
00:04:54,810 --> 00:04:56,710
around York message.

62
00:04:56,790 --> 00:04:57,900
That's better.

63
00:04:58,910 --> 00:05:01,520
Now if I sign up there we go.

64
00:05:01,520 --> 00:05:02,150
So I see.

65
00:05:02,220 --> 00:05:06,110
Email must be valid and password must be between four and twenty characters.

66
00:05:06,110 --> 00:05:11,570
Now naturally it would be better to show this validation information right next to right underneath

67
00:05:11,600 --> 00:05:13,220
each of these input elements.

68
00:05:13,250 --> 00:05:17,330
That is why we put on that field property on each of these air objects.

69
00:05:17,330 --> 00:05:22,130
So remember every air object has a message and possibly the field property so he could take a look at

70
00:05:22,130 --> 00:05:25,910
that field property and use it to look up these different errors and then put them right underneath

71
00:05:25,910 --> 00:05:27,060
the appropriate input.

72
00:05:27,290 --> 00:05:31,520
But that was just a little bit too much on the react side for the context of this course.

73
00:05:31,520 --> 00:05:33,530
So I just I just keep it simple.

74
00:05:33,530 --> 00:05:35,570
This is pretty much good enough.

75
00:05:35,600 --> 00:05:39,710
The last thing that we need to do is make sure that we only show this entire div if there actually are

76
00:05:39,710 --> 00:05:47,410
some errors that are going to take the entire div I'm going to wrap with a set of curly braces then

77
00:05:47,470 --> 00:05:48,460
right in front of a div.

78
00:05:48,550 --> 00:05:56,950
We're gonna add in errors dot length greater than zero and then the div itself.

79
00:05:56,950 --> 00:06:02,860
So as long as we have more than one error let's show that div again then save this.

80
00:06:02,870 --> 00:06:04,760
I'm going to flip back over now.

81
00:06:04,760 --> 00:06:06,400
I don't see anything at all by default.

82
00:06:06,500 --> 00:06:09,690
But as soon as I have some errors I see the div start to appear.

83
00:06:09,810 --> 00:06:10,070
OK.

84
00:06:10,100 --> 00:06:12,440
So that definitely looks good now.

85
00:06:12,530 --> 00:06:16,910
Although this is a reasonable implementation right here I just want to point out that this kind of validation

86
00:06:16,910 --> 00:06:21,830
and error displaying logic and even the request logic we have up here is something we're probably going

87
00:06:21,830 --> 00:06:24,650
to repeat many times throughout this application.

88
00:06:24,650 --> 00:06:27,450
We have many different forms we need to put together.

89
00:06:27,590 --> 00:06:32,090
Not only do we have to put together some forms for sign in but we also need to eventually create some

90
00:06:32,090 --> 00:06:38,390
forms for say creating an order or creating a ticket or editing a ticket so without a doubt a lot of

91
00:06:38,390 --> 00:06:42,920
logic that we just wrote out is going to have to be repeated several times over our project.

92
00:06:42,920 --> 00:06:43,660
So then minds.

93
00:06:43,700 --> 00:06:45,020
Let's take a pause right now.

94
00:06:45,110 --> 00:06:49,310
We're going to come back the next video and we're going to try to extract a lot of this logic around

95
00:06:49,310 --> 00:06:52,100
making request into some kind of helper function.