Let's finish off this form, the first we have to do is add in some state to keep track of the title
and the price that the user enters to keep track of the state.
We will use the you state hook from react by.
We'll import you state.
From react at the top.
I'm then going to create two different pieces of state.
So first, one of the called title.
And the second will be outprice.
And I'm going to initialize price as an empty string, even though we really intend for it to be a number
three, some initializing it as an empty string is just so when the input first shows up, there'll
be absolutely nothing inside there.
And so that the value will always LSP a string.
Then I'll find the first input.
That's for our title.
We're going to wire up an event handler and also set the value on this thing as well.
So its value is going to come from title.
And anytime someone makes a change to this, so put it on change.
I want to call.
A little callback function, I can receive the event as abbreviated E and then I'll call that title
with E!
Target value.
I'll then say this just to get that thing to wrap around.
Yep.
There we go.
Don't repeat the same process for a price as well.
Value is going to be price.
And anytime someone changes this.
I want to receive that event call set price with e target dot value.
Let's do a quick test.
I don't really expect anything to happen here.
I just want to make sure that if I have my console open, I don't have any airs or anything like that.
So I'll put in some title.
And I'll put in some price.
All right.
Definitely works.
Now, as a quick reminder here, our price, at least for my application.
I'm imagining that this is a price that makes use of U.S. dollars.
So if a user enters a price that looks like this, that doesn't really make a lot of sense.
There is no unit inside of US dollars smaller than the one hundredths place.
So really, whenever a user enters in a really low decimal, I would really like to just kind of round
it to the near cents.
So zero zero zero one should really end up as just twelve dot zero zero.
Now, we'd really like to do that formatting right after the user types in a number so that they understand
that I'm reformatting this thing for them.
We understand that.
Well, they're not going to pay some fraction of a cent or anything like that.
So to put in some automatic formatting.
I'm going to add in an additional event handler to our price inputs.
Going to add in an event handler to watch for the on blurr event and any sondes blurt event occurs.
I'm going to call a helper function that I'm going to define at the top.
My component called on Blur.
Now, if you're not familiar with the Blur event, just a very quick aside here, the Blur event is
triggered on an input.
Anytime a user clicks into an input and then clicks out, so specifically when they click out or d select
the input that triggers an event called the Blur event.
So whenever the user clicks out on then going to do some automatic formatting on that number.
I'm going to define this on Bler helper function right above all my G.S. X.
The inside of on Blair, I'm going to take a look at the price piece of state.
And I'm going to try to pass the value.
Make sure that it's some kind of valid value, like an actual number, and then do that rounding step
to make sure that it doesn't have any decimal places or anything like that.
So I'm going to take the price that the user entered and assign it to a new variable called value after
passing it through the pass float function.
So this is going to make sure that a user is entering an actual number as opposed to some string of
characters or something like that.
If we call past float on a string of characters and we get back some well, not no, it's going to be
devalue.
Not a number in JavaScript.
So let me just give you a very quick example of that, because it's confusing if I just say it with
words inside my console really quickly, if I do a pass float on a string of characters, I get back.
Not a number.
So we should probably check for that and make sure that a user did not enter in.
I don't know, just a bunch of characters here by mistake or something like that.
So I'll say if.
Is not a no.
This is a function that is built into JavaScript and it checks for a value being, not a number.
Notice that the capitalization here is capital N.
Lowercase a capital N.
I'll pass in value.
So we got out not a number.
Well, I don't want to try to do any of this rounding stuff or anything like that, so I'm just going
to return.
Otherwise, if we get past that check, if the user actually entered a real number here, then I'm going
to go through that rounding step.
So I had to call set price to update our price piece of state and into set price.
I'm going to provide value dot to fixed, too.
That is what is going to do the actual rounding step.
So I got to say this, look back over and then do a quick test.
If I now enter in 12 zero zero zero one and then click out, it rounds it off to just twelve for me
if I put in 12 dot.
About zero one nine.
I would expect that to get rounded to twelve point two.
Yep, looks like that works as well.
And then if I just put in a big string, like, so nothing really bad happens.
Now, you might be saying, Steven, wait, should we do some validation and tell the user that they
just put in some invalid input here?
Well, remember, our backend API is actually going to do some validation for us.
So we'll just rely upon the backend to do that validation step.
I'm just doing the rounding step right here just because well, I want to tell the user as soon as possible
that I'm going to change their price for them.
What if the user entered in some input that is going to just plain fail?
Then I'm going to let the server handle that failure.
Kisses looks good.
Now we've got all this state.
Keeping track of all these different state.
Doing a little sanitisation step.
This all looks good.
So the last thing to do is make a request to our tickets service to create the new ticket.
It has been a while since we have made a request with next J.S..
So let's take a look at how we have been handling requests in the past.
In the next video.