1
00:00:00,830 --> 00:00:06,110
Let's finish off this form, the first we have to do is add in some state to keep track of the title

2
00:00:06,500 --> 00:00:09,470
and the price that the user enters to keep track of the state.

3
00:00:09,500 --> 00:00:12,430
We will use the you state hook from react by.

4
00:00:12,510 --> 00:00:13,610
We'll import you state.

5
00:00:14,780 --> 00:00:15,830
From react at the top.

6
00:00:16,750 --> 00:00:19,040
I'm then going to create two different pieces of state.

7
00:00:20,810 --> 00:00:22,430
So first, one of the called title.

8
00:00:25,800 --> 00:00:27,140
And the second will be outprice.

9
00:00:30,020 --> 00:00:34,920
And I'm going to initialize price as an empty string, even though we really intend for it to be a number

10
00:00:35,430 --> 00:00:38,910
three, some initializing it as an empty string is just so when the input first shows up, there'll

11
00:00:38,910 --> 00:00:40,290
be absolutely nothing inside there.

12
00:00:40,470 --> 00:00:42,720
And so that the value will always LSP a string.

13
00:00:43,780 --> 00:00:45,130
Then I'll find the first input.

14
00:00:45,760 --> 00:00:46,570
That's for our title.

15
00:00:46,790 --> 00:00:50,020
We're going to wire up an event handler and also set the value on this thing as well.

16
00:00:50,710 --> 00:00:52,420
So its value is going to come from title.

17
00:00:53,460 --> 00:00:57,110
And anytime someone makes a change to this, so put it on change.

18
00:00:57,630 --> 00:00:58,380
I want to call.

19
00:01:00,680 --> 00:01:06,770
A little callback function, I can receive the event as abbreviated E and then I'll call that title

20
00:01:07,280 --> 00:01:07,880
with E!

21
00:01:08,060 --> 00:01:09,080
Target value.

22
00:01:10,830 --> 00:01:13,450
I'll then say this just to get that thing to wrap around.

23
00:01:13,810 --> 00:01:13,900
Yep.

24
00:01:14,170 --> 00:01:14,560
There we go.

25
00:01:16,660 --> 00:01:19,180
Don't repeat the same process for a price as well.

26
00:01:20,880 --> 00:01:22,560
Value is going to be price.

27
00:01:23,730 --> 00:01:25,260
And anytime someone changes this.

28
00:01:26,540 --> 00:01:33,530
I want to receive that event call set price with e target dot value.

29
00:01:37,980 --> 00:01:38,940
Let's do a quick test.

30
00:01:39,320 --> 00:01:40,890
I don't really expect anything to happen here.

31
00:01:40,920 --> 00:01:44,760
I just want to make sure that if I have my console open, I don't have any airs or anything like that.

32
00:01:45,220 --> 00:01:46,620
So I'll put in some title.

33
00:01:47,620 --> 00:01:48,730
And I'll put in some price.

34
00:01:49,480 --> 00:01:49,660
All right.

35
00:01:49,690 --> 00:01:50,470
Definitely works.

36
00:01:51,140 --> 00:01:54,670
Now, as a quick reminder here, our price, at least for my application.

37
00:01:54,700 --> 00:01:58,450
I'm imagining that this is a price that makes use of U.S. dollars.

38
00:01:59,200 --> 00:02:03,690
So if a user enters a price that looks like this, that doesn't really make a lot of sense.

39
00:02:03,700 --> 00:02:09,040
There is no unit inside of US dollars smaller than the one hundredths place.

40
00:02:09,500 --> 00:02:14,140
So really, whenever a user enters in a really low decimal, I would really like to just kind of round

41
00:02:14,140 --> 00:02:15,220
it to the near cents.

42
00:02:15,690 --> 00:02:21,040
So zero zero zero one should really end up as just twelve dot zero zero.

43
00:02:22,710 --> 00:02:27,540
Now, we'd really like to do that formatting right after the user types in a number so that they understand

44
00:02:27,540 --> 00:02:29,310
that I'm reformatting this thing for them.

45
00:02:29,670 --> 00:02:30,360
We understand that.

46
00:02:30,450 --> 00:02:33,450
Well, they're not going to pay some fraction of a cent or anything like that.

47
00:02:34,370 --> 00:02:36,090
So to put in some automatic formatting.

48
00:02:37,390 --> 00:02:41,080
I'm going to add in an additional event handler to our price inputs.

49
00:02:41,910 --> 00:02:48,490
Going to add in an event handler to watch for the on blurr event and any sondes blurt event occurs.

50
00:02:48,550 --> 00:02:50,980
I'm going to call a helper function that I'm going to define at the top.

51
00:02:51,010 --> 00:02:52,960
My component called on Blur.

52
00:02:53,890 --> 00:02:58,090
Now, if you're not familiar with the Blur event, just a very quick aside here, the Blur event is

53
00:02:58,090 --> 00:02:59,230
triggered on an input.

54
00:02:59,320 --> 00:03:06,580
Anytime a user clicks into an input and then clicks out, so specifically when they click out or d select

55
00:03:06,580 --> 00:03:09,670
the input that triggers an event called the Blur event.

56
00:03:10,300 --> 00:03:13,930
So whenever the user clicks out on then going to do some automatic formatting on that number.

57
00:03:16,090 --> 00:03:19,900
I'm going to define this on Bler helper function right above all my G.S. X.

58
00:03:27,700 --> 00:03:31,320
The inside of on Blair, I'm going to take a look at the price piece of state.

59
00:03:32,590 --> 00:03:34,270
And I'm going to try to pass the value.

60
00:03:34,330 --> 00:03:38,680
Make sure that it's some kind of valid value, like an actual number, and then do that rounding step

61
00:03:38,680 --> 00:03:41,620
to make sure that it doesn't have any decimal places or anything like that.

62
00:03:42,460 --> 00:03:49,570
So I'm going to take the price that the user entered and assign it to a new variable called value after

63
00:03:49,570 --> 00:03:52,060
passing it through the pass float function.

64
00:03:52,990 --> 00:03:57,640
So this is going to make sure that a user is entering an actual number as opposed to some string of

65
00:03:57,640 --> 00:03:59,050
characters or something like that.

66
00:04:00,440 --> 00:04:06,140
If we call past float on a string of characters and we get back some well, not no, it's going to be

67
00:04:06,230 --> 00:04:06,850
devalue.

68
00:04:07,010 --> 00:04:08,810
Not a number in JavaScript.

69
00:04:08,850 --> 00:04:12,680
So let me just give you a very quick example of that, because it's confusing if I just say it with

70
00:04:12,680 --> 00:04:19,640
words inside my console really quickly, if I do a pass float on a string of characters, I get back.

71
00:04:19,700 --> 00:04:20,570
Not a number.

72
00:04:22,050 --> 00:04:24,970
So we should probably check for that and make sure that a user did not enter in.

73
00:04:25,210 --> 00:04:27,970
I don't know, just a bunch of characters here by mistake or something like that.

74
00:04:28,710 --> 00:04:29,680
So I'll say if.

75
00:04:30,950 --> 00:04:32,580
Is not a no.

76
00:04:33,170 --> 00:04:37,250
This is a function that is built into JavaScript and it checks for a value being, not a number.

77
00:04:37,700 --> 00:04:40,430
Notice that the capitalization here is capital N.

78
00:04:40,700 --> 00:04:42,250
Lowercase a capital N.

79
00:04:43,110 --> 00:04:44,510
I'll pass in value.

80
00:04:46,230 --> 00:04:47,580
So we got out not a number.

81
00:04:47,850 --> 00:04:51,630
Well, I don't want to try to do any of this rounding stuff or anything like that, so I'm just going

82
00:04:51,630 --> 00:04:52,530
to return.

83
00:04:54,590 --> 00:04:58,820
Otherwise, if we get past that check, if the user actually entered a real number here, then I'm going

84
00:04:58,820 --> 00:05:00,230
to go through that rounding step.

85
00:05:00,570 --> 00:05:05,330
So I had to call set price to update our price piece of state and into set price.

86
00:05:05,390 --> 00:05:08,690
I'm going to provide value dot to fixed, too.

87
00:05:09,740 --> 00:05:12,140
That is what is going to do the actual rounding step.

88
00:05:13,540 --> 00:05:17,170
So I got to say this, look back over and then do a quick test.

89
00:05:18,040 --> 00:05:23,980
If I now enter in 12 zero zero zero one and then click out, it rounds it off to just twelve for me

90
00:05:24,760 --> 00:05:26,620
if I put in 12 dot.

91
00:05:27,850 --> 00:05:29,920
About zero one nine.

92
00:05:30,010 --> 00:05:32,440
I would expect that to get rounded to twelve point two.

93
00:05:33,140 --> 00:05:34,360
Yep, looks like that works as well.

94
00:05:34,970 --> 00:05:38,410
And then if I just put in a big string, like, so nothing really bad happens.

95
00:05:39,070 --> 00:05:43,000
Now, you might be saying, Steven, wait, should we do some validation and tell the user that they

96
00:05:43,000 --> 00:05:44,590
just put in some invalid input here?

97
00:05:45,040 --> 00:05:48,940
Well, remember, our backend API is actually going to do some validation for us.

98
00:05:49,510 --> 00:05:52,780
So we'll just rely upon the backend to do that validation step.

99
00:05:53,140 --> 00:05:57,610
I'm just doing the rounding step right here just because well, I want to tell the user as soon as possible

100
00:05:57,790 --> 00:05:59,380
that I'm going to change their price for them.

101
00:05:59,890 --> 00:06:03,070
What if the user entered in some input that is going to just plain fail?

102
00:06:03,340 --> 00:06:05,590
Then I'm going to let the server handle that failure.

103
00:06:07,410 --> 00:06:08,190
Kisses looks good.

104
00:06:08,760 --> 00:06:10,050
Now we've got all this state.

105
00:06:11,210 --> 00:06:12,560
Keeping track of all these different state.

106
00:06:12,590 --> 00:06:14,300
Doing a little sanitisation step.

107
00:06:14,540 --> 00:06:15,250
This all looks good.

108
00:06:15,310 --> 00:06:19,850
So the last thing to do is make a request to our tickets service to create the new ticket.

109
00:06:20,450 --> 00:06:23,750
It has been a while since we have made a request with next J.S..

110
00:06:24,180 --> 00:06:27,140
So let's take a look at how we have been handling requests in the past.

111
00:06:27,280 --> 00:06:28,250
In the next video.