All language subtitles for 020 Refactoring an Input Component_en

Now there is one last hook,

not in general there are more hooks,

but there is one last hook which I wanna dive in right now

because it fits really well into this section here

into this module.

For that we'll first of all have to change

our code a little bit though.

We'll create a new component,

a input component that contains our input divs,

and that receives all the data it needs through props.

So that just like the button it's reusable

because we will indeed reuse it

for the email and the password input.

Now, feel free to try to create such an input component

on your own and use it here in this log in forum.

That's a little mini assignment,

a little mini tasks you can dive in.

Here's a short pause for you to pause the video

and thereafter we'll do that together

and thereafter, we'll see which hook I'm talking about.

So, very successful, let's do it together.

For data in the UI folder,

I'll edit input folder with their input JS file.

And in there from React, I import React

because we're going to create a component in there

the input component which gets props

and which we export here just like this.

Now the JSX that should be returned here as I mentioned

should be that div here,

so I'll grab that div from the email,

cut it from the login component

and add it here as a return value.

And therefore I'll also add an input.module.CSSfile,

to bring over all the styles I want.

So I'll import classes from ./input.module.CSS,

and of course all the migrate the respect of styles.

Here in the login module,

I'm basically talking about all those control styles here.

They are all related except for the actions,

so actually I'll cut everything in front of actions

because actions is part of the login component.

Bring the control part into the input module,

CSS file build and that of course,

then all includes this media Curry.

Bring that over as well,

and with that we got the styles migrated.

Now back in the input component,

we now got some data we need to get from outside.

To make this reusable,

I of course don't want to focus

on just the emails state here,

instead I'm just interested in

whether these input is valid or not,

so I expect to get just is valid prop

on my prompts object here to then add

these invalid clause or not.

This text here should be settable from outside.

Let's say on a label prop,

this ID here should be settable from outside.

So I will expect us on our ID prop,

this type here should be settable from outside.

The value should be settable from outside,

and here to change and the blur handlers as well.

So here I'll have onChange, and here I'll have onBlur.

And this should be a quiet reusable input component.

And we can now use this here in the login component

where we previously had that div.

So there I'll add the input component,

of course, for that make sure you do import it.

You do import your input component here

from the newly traded input file,

and now we need to configure that component.

So for example, we need to pass our ID,

email, our label, which was email like this,

our type which is email and also is valid prop

which is the email is valid constant,

which we essentially have up here

pulling it out from the email state.

That's something we wanna forward.

And of course we also need the value prop

that needs to be set on our email state value

and also onChange and onBlur.

So onChange here is our email change handler,

and onBlur is our validate email handler.

And with that, we have our email input.

Now we also of course, need to migrate the password,

so here we're going to replace this div

with this input but now for password,

the label text should be password.

The password at a type should be password.

Here we have password is valid,

we have the password state value.

We got the password change handler

and we got the validate password handler here.

So with that, we should have to the same behavior as before,

and we do that works

but now we have these separate components here.

Now that's a nice practice and that's always good.

And it's also a good example

for when we wanna use props verses Context.

We absolutely want props here

because those input components,

as you can see should be reusable

and they offer you as props so that we can configure them

from inside the parent where we are using them.

If we would use Context inside of the input,

every input would do the same thing,

it would be bound to the same Context,

it might be less reusable then.

But that wasn't the main focus,

this instead just now allows me to move on to the next hook,

which I want to show you.