1
00:00:00,770 --> 00:00:03,950
In the last couple of videos we've been talking about event handlers in react.

2
00:00:03,950 --> 00:00:07,210
I think overall event handlers are not the worst thing in the world.

3
00:00:07,280 --> 00:00:10,970
All we have to do is find some element that we want to watch for some event.

4
00:00:11,180 --> 00:00:18,080
We add a prop to it of on change or whatever event we want to watch for a change or a click or submit

5
00:00:18,140 --> 00:00:19,170
whatever it is.

6
00:00:19,520 --> 00:00:24,400
We'll pass that prop a callback and then that callback will be invoked any time that event occurs.

7
00:00:24,620 --> 00:00:29,450
And as we just saw in the last video we can shorten the syntax by passing an arrow function directly

8
00:00:29,510 --> 00:00:31,550
to the prop itself.

9
00:00:31,550 --> 00:00:36,470
Now in this section we're going to continue down this path of event handlers and we're going to look

10
00:00:36,470 --> 00:00:42,610
at Unfortunately a kind of little bit more challenging subject around event handlers.

11
00:00:42,620 --> 00:00:46,400
So let me give you a quick overview on what's going to go on here at present.

12
00:00:46,460 --> 00:00:52,580
Inside of our search bar component we have created what is called a uncontrolled form element.

13
00:00:52,580 --> 00:00:58,360
In particular this input right here this text input is a controlled form element.

14
00:00:58,370 --> 00:01:04,770
Now in general you and I as re-act developers prefer to work with controlled components.

15
00:01:04,880 --> 00:01:06,930
We have this we want this.

16
00:01:07,190 --> 00:01:12,950
So in this video we're going to refactor our search bar from a uncontrolled element to a controlled

17
00:01:12,980 --> 00:01:13,790
element.

18
00:01:14,060 --> 00:01:17,960
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

19
00:01:17,960 --> 00:01:22,370
straight out you know what the differences between the two were going to do the re factor.

20
00:01:22,370 --> 00:01:25,810
We're going to observe that the component is basically the same it was before.

21
00:01:25,970 --> 00:01:31,160
And then I'm going to tell you exactly what the difference is between these two and why we prefer controls.

22
00:01:31,160 --> 00:01:31,640
OK.

23
00:01:31,880 --> 00:01:33,380
So let's get to it.

24
00:01:33,380 --> 00:01:36,290
All right I'm going to flip back over to my search bar.

25
00:01:36,350 --> 00:01:41,260
I'm going to find the on input change event handler and I'm going to delete it completely.

26
00:01:42,720 --> 00:01:47,190
Then at the very top of my class I'm going to initialize a state object.

27
00:01:47,260 --> 00:01:54,200
It's going to say state is a object that has a single property that we will refer to as term.

28
00:01:54,350 --> 00:02:01,000
And this is going to be defaulted to an empty string and then down inside of onchange right here I'm

29
00:02:01,000 --> 00:02:06,730
going to find where we were passing in on input change and I'm going to replace it with an arrow function

30
00:02:06,790 --> 00:02:08,610
just like we saw a moment ago.

31
00:02:09,040 --> 00:02:11,530
I'm going to refer to the argument simply as e.

32
00:02:11,590 --> 00:02:13,530
Just an abbreviation of event.

33
00:02:13,720 --> 00:02:20,970
And then inside of your all say this dot set States term is going to be the target value.

34
00:02:22,520 --> 00:02:22,710
OK.

35
00:02:22,730 --> 00:02:23,750
So look at what we're doing here.

36
00:02:23,780 --> 00:02:25,230
We are initializing our state.

37
00:02:25,250 --> 00:02:28,870
It has a single property called term that starts off as an empty string.

38
00:02:29,030 --> 00:02:35,930
And then every single time a user types inside that input we are going to update our state or more precisely.

39
00:02:35,960 --> 00:02:41,650
We're going to update that term property with whatever the current value out of the input is.

40
00:02:41,670 --> 00:02:43,330
And now here is the last step.

41
00:02:43,340 --> 00:02:52,360
Also on the input I'm going to say a new prop called value will be equal to this state DOT term and

42
00:02:52,370 --> 00:02:53,300
I'm going to save this file.

43
00:02:53,300 --> 00:02:58,200
It's going to reformat the input so you can see it all like so.

44
00:02:58,220 --> 00:02:58,540
All right.

45
00:02:58,550 --> 00:02:59,510
So let's save this.

46
00:02:59,540 --> 00:03:02,480
And again not going to say anything about what's going on here just yet.

47
00:03:02,480 --> 00:03:05,010
We're going to flip over to the browser and we're going to see that.

48
00:03:05,030 --> 00:03:05,360
Yes.

49
00:03:05,360 --> 00:03:09,330
In fact our components still works the same way it did before.

50
00:03:09,800 --> 00:03:14,840
All right so back over here or refresh the page and now I can type in here and still working and I could

51
00:03:14,840 --> 00:03:17,360
still type in here I see text appear.

52
00:03:17,360 --> 00:03:20,180
So what is the point of all this stuff that we just added.

53
00:03:20,300 --> 00:03:21,700
Why are we using state.

54
00:03:21,740 --> 00:03:24,710
Why are we updating state whenever we change the input.

55
00:03:24,890 --> 00:03:28,220
And why are we passing something called value back into the input.

56
00:03:28,220 --> 00:03:29,900
These are all fantastic questions.

57
00:03:29,900 --> 00:03:31,080
Let's take a pause right here.

58
00:03:31,100 --> 00:03:35,390
When I come back the next section we're going to discuss exactly what the difference between uncontrolled

59
00:03:35,420 --> 00:03:36,660
and controlled is.

60
00:03:36,800 --> 00:03:38,630
So quick pause and I'll see you in just a minute.