In the last couple of videos we've been talking about event handlers in react.
I think overall event handlers are not the worst thing in the world.
All we have to do is find some element that we want to watch for some event.
We add a prop to it of on change or whatever event we want to watch for a change or a click or submit
whatever it is.
We'll pass that prop a callback and then that callback will be invoked any time that event occurs.
And as we just saw in the last video we can shorten the syntax by passing an arrow function directly
to the prop itself.
Now in this section we're going to continue down this path of event handlers and we're going to look
at Unfortunately a kind of little bit more challenging subject around event handlers.
So let me give you a quick overview on what's going to go on here at present.
Inside of our search bar component we have created what is called a uncontrolled form element.
In particular this input right here this text input is a controlled form element.
Now in general you and I as re-act developers prefer to work with controlled components.
We have this we want this.
So in this video we're going to refactor our search bar from a uncontrolled element to a controlled
element.
When we do this three factor it's not going to make a lot of sense and I'm not even going to tell you
straight out you know what the differences between the two were going to do the re factor.
We're going to observe that the component is basically the same it was before.
And then I'm going to tell you exactly what the difference is between these two and why we prefer controls.
OK.
So let's get to it.
All right I'm going to flip back over to my search bar.
I'm going to find the on input change event handler and I'm going to delete it completely.
Then at the very top of my class I'm going to initialize a state object.
It's going to say state is a object that has a single property that we will refer to as term.
And this is going to be defaulted to an empty string and then down inside of onchange right here I'm
going to find where we were passing in on input change and I'm going to replace it with an arrow function
just like we saw a moment ago.
I'm going to refer to the argument simply as e.
Just an abbreviation of event.
And then inside of your all say this dot set States term is going to be the target value.
OK.
So look at what we're doing here.
We are initializing our state.
It has a single property called term that starts off as an empty string.
And then every single time a user types inside that input we are going to update our state or more precisely.
We're going to update that term property with whatever the current value out of the input is.
And now here is the last step.
Also on the input I'm going to say a new prop called value will be equal to this state DOT term and
I'm going to save this file.
It's going to reformat the input so you can see it all like so.
All right.
So let's save this.
And again not going to say anything about what's going on here just yet.
We're going to flip over to the browser and we're going to see that.
Yes.
In fact our components still works the same way it did before.
All right so back over here or refresh the page and now I can type in here and still working and I could
still type in here I see text appear.
So what is the point of all this stuff that we just added.
Why are we using state.
Why are we updating state whenever we change the input.
And why are we passing something called value back into the input.
These are all fantastic questions.
Let's take a pause right here.
When I come back the next section we're going to discuss exactly what the difference between uncontrolled
and controlled is.
So quick pause and I'll see you in just a minute.