All language subtitles for 059 Controlled Inputs.en_US

Nicely done.

Hopefully we are clear on the basics and let's see how we can connect our inputs to the state values,

because at the moment, yeah, we can prevent a default.

We can control the world.

But of course, what I would want is to access the data that is inside input as I'm typing or as I'm

submitting.

And the way we do that and react, we set up state values.

So again, we'll use use state.

And then only to add to attributes all the input value that will reference the estate value and then

on change and on change, event listener will fire the callback function each and every time we type

something in the input.

And I guess let's start by setting up our state values.

So here I'm going to go with Konstantine first name and then I'll say set.

First name, and that is equal to my state, and then by default, it is just going to be an empty string.

I'll copy and paste and of course, I'll do the same thing with email where it's going to be an email

and then send email.

And again, by default, it is going to be a empty string.

So now what I would want is to head to my inputs.

And then, like I said, we have to add two attributes.

One is going to be value and the second one will be on Chege event listener, where we'll set up our

callback function.

So here, let's write value and which value would want a reference from the state?

Well, I guess most sense would make a first name, correct.

So again, I'm just referencing here the state value and I'll do the same thing with my email.

So again, we go with value and then we're looking at which state value would want to reference.

And the moment you do that, you'll notice something interesting.

First of all, there's going to be a big fat error because React will complain or maybe more specifically

warning.

Where we react will complain that I provided value prop.

However, I missed out on the on change handler.

The more you react with the on change handler a little bit later.

Now I just want you to understand that notice how you're typing and nothing is happening.

Why nothing is happening.

Well, because we connected our forms meaning our inputs to the state.

So since both of my state values are empty strengths, they all the time will stay like this.

Now, of course, if I say hello world, of course in my name one, I will have that whole world.

Just keep in mind, of course, now we have connected those inputs to the state value and the last thing

in a puzzle is to set up that on change.

So each and every time we will type something in a form will fire that function and within that function

we will set up of this state value and that in return you will right away see it in the form as well.

Just hopefully this is clear where now the value in the form depends on the state value.

And since it is an empty string, that's why you can type all day long and nothing won't change in the

form.

And with that said, now let's set up our own change handler.

So we go here with On Change.

And again, we can set up a reference, meaning we can set up a separate function and just referenced

it, or we can set up the in line one.

Now, since this is already fifth or sixth example of in line and reference, I'm not going to set up

two separate scenarios.

I'll just do the in line where we'll have to pass in our arrow function first, because again we will

be invoking and now we're go set first.

And so here comes the interesting part.

Remember when we were submitting the form, we had access to the event object.

And in this case, the method that we're looking for on the event object was prevent default.

Now, with on change, we also would want to access the event object, however, in this case, what

we're looking for is the event target value.

So the same deal like we had with Handelsman where we had access to the event object, same works with

on change, where again, we can access the event object, or in this case, what we're looking for

is the event target and more specifically, value.

So that is going to give us whatever is typed in the actual input.

So I'm going to go here with event of Target and then we're looking for the value.

So now what you'll notice with the first one as you start typing, actually, the values are displayed

on what is even more interesting.

If you go to the components, you'll notice that at the moment there's nothing there.

Yeah, that is true.

My control inputs are I'm sorry, in here.

So now we have the state value and as you start typing notice the state value also changes.

So we're affecting that in two places because we have connected our form each and every time I type

something in the form the on change function fires.

And then within that function I have said first name and then I'm controlling of the state.

Now, in turn, I'm also controlling the input.

Remember when it was just an empty string, while we could type all day long and nothing was changing

in the input.

So now, of course, once we have our own change and we have the function, we access the event object.

And then in order to get the value for this particular input, I would need to go with event object

that I'm looking for to target and then I'm looking for the value so similar like we worked and just

went with JavaScript.

Or in this case, we directly can access our input because we have an object, then we have a target.

So that is going to be our input.

And then more specifically, we're looking for the value property.

And of course, once we have this set up, I would want to do the same thing for my email where I'll

copy and paste.

And in the email I'll also do the same thing.

So I have on change.

However, in this case, of course, I would want to call set email, not first name, but the event

of course, won't change.

So I'm going to go here with email and once we do that, check it out.

Now I can type and everything is displayed correctly.

And of course once we have this particular set up now in the handle submit, instead of looking for

specific input, once I submit the form now I have access to them in the state, the first name as well

as the email.

So let's do that.

I will consider log here the first name or last name.

First name and forms are email I guess more properly.

So it's type.

We're going to go here, know what, let's write some reasonable name, John, and then we're going

to go with John at Gmail dot com and once we add the person, there it is now we have John and John

at Gmail dot com.

So that's how we can set up controlled inputs in react.

Remember, you need to have a value property that references some state value and then you have on change

event listener where either you set up a reference.

So either you set up a function here like we did with and or submit, just make sure that in either

case you're looking for this event.

So you passed in that first parameter because that will reference the event object.

And then in order to control the state value, you call the set function.

And then what you would want to pass in is the event target.

So you're grabbing the input and more specifically, you'd want to get the value for each and every

time you type something in the form, in turn you'll change the state value.

And then since that state of value is referenced over here also, it will be displayed in the form input.