All language subtitles for 012 Re-Using The Custom Hook_en

So, let's now also use the custom hook

for the entered email.

For this, I'll call useInput here,

and we get back this object with all that data

we can pull out and use here.

For example, the value, which I'll assign

to a entered email alias.

The isValid value, which I'll assign to a entered email

isValid alias, we'll get hasError which I'll assign

to the emailInputHasError alias,

and reformat this to make it easier to read,

we'll get the valueChangeHandler,

which I'll assign to emailChangeHandler,

and the same for the inputBlurHandler, which I assign

to emailBlurHandler,

and then reset, which I'll assign to resetEmailInput.

We also need to pass in our validation function

and hence, I'll grab this logic and then again

to find a function here in line, which gets a value

which will be passed in from inside the hook,

where I then return the result of calling Includes At

on this value.

This determines whether this is valid or not.

With that, I can get rid of these two lines of code.

We can get rid of these two lines of code here,

and then here for the overall form validity,

we already are using enteredEmailIsValid,

so that works.

We can get rid of the emailInputChangeHandler

and the emailInputBlurHandlers

here in the form submission handler.

We also of course wanna reset the emailInput

and then here, I wanna use the emailInputHasError field

to determine the CSS classes

and if we scroll down to the JSX code, here I wanna use

the emailChangeHandler and the emailBlurHandler

and the emailInputHasError field here.

And with that, we're using this hook for the emailInput

as well.

We can also get rid of the useStateImport now

because here, I'm now not using useState anymore.

And with that again, if I reload here

this both behaves as it did before

but now with less code duplication here.

Now, we have a working code here

with the help of our custom hook

which we can call and pull out the values

which we need, where all the logic then resides inside

of the hook, and hence our component can stay

a bit leaner and can focus mostly on the JSX,

on validating the overall form, which is fairly simple,

and on handling the form submission.