1
00:00:01,100 --> 00:00:05,960
In the last section we did a little refactor on our search for our component in this video on it tell

2
00:00:05,960 --> 00:00:08,650
you a little bit about what's going on with the code inside of here.

3
00:00:08,720 --> 00:00:13,730
And then I'm going to tell you exactly what the differences between a uncontrolled and controlled component.

4
00:00:13,880 --> 00:00:20,150
So first what is going on with that code is the way to explain this would be to show you a flow diagram

5
00:00:20,180 --> 00:00:22,480
of what is now happening inside of our component.

6
00:00:22,580 --> 00:00:26,600
And then for each step inside of your we'll go back and refer to one of the different lines of code

7
00:00:26,600 --> 00:00:27,390
that we have.

8
00:00:27,620 --> 00:00:33,260
So first thing that happens is the user types in that input and the instant they do our callback gets

9
00:00:33,260 --> 00:00:34,080
invoked.

10
00:00:34,130 --> 00:00:37,220
The one that we are passing to onchange right here.

11
00:00:37,220 --> 00:00:42,320
So the instant a user types that input this function gets called just as we were talking about a couple

12
00:00:42,320 --> 00:00:43,230
of videos ago.

13
00:00:44,140 --> 00:00:49,960
Then inside that callback we pull the current value of the input or the whatever the user just typed

14
00:00:49,960 --> 00:00:56,610
in there out of the event object and we update our state on our component by calling set state.

15
00:00:56,970 --> 00:01:02,020
So right here inside the body the callback we take that event object which we are abbreviating simply

16
00:01:02,020 --> 00:01:05,740
as we pull the change in that input.

17
00:01:05,740 --> 00:01:09,330
How did that event object by referencing event target value.

18
00:01:09,670 --> 00:01:14,070
And then we update the state on our component with that new value.

19
00:01:14,380 --> 00:01:20,220
So now this state term is going to contain whatever the user just typed into that input.

20
00:01:21,620 --> 00:01:22,610
Now here's the important part.

21
00:01:22,610 --> 00:01:28,340
Remember any time we call set state the component is going to automatically render itself so the render

22
00:01:28,340 --> 00:01:33,650
method right here gets called a second time the instant the user type something in there.

23
00:01:33,650 --> 00:01:35,230
And now here's the critical part.

24
00:01:35,330 --> 00:01:43,130
When the component renders we take the value of that input or we take our this state DOT term right

25
00:01:43,130 --> 00:01:50,840
here and we assign it to the value prop of the input the value prop right there is going to essentially

26
00:01:50,900 --> 00:01:55,200
overwrite whatever text is already inside of the input.

27
00:01:55,220 --> 00:01:57,130
Now I can demonstrate that to you very easily.

28
00:01:57,140 --> 00:01:59,190
Notice how I'm gonna change this line right here.

29
00:01:59,270 --> 00:02:00,960
I'll change it to something like that.

30
00:02:01,830 --> 00:02:08,260
And now if I flip back over you'll see that my text input right here now has all that jibberish I typed

31
00:02:08,260 --> 00:02:08,760
in.

32
00:02:08,770 --> 00:02:13,120
So whatever we assign to that value prop is what the input is going to show.

33
00:02:13,450 --> 00:02:20,680
So the net result of saying the value is this not states term is we take whatever string is inside of

34
00:02:20,680 --> 00:02:26,530
this odd that term and we essentially push it into or we shove it into the input.

35
00:02:26,620 --> 00:02:26,920
All right.

36
00:02:26,920 --> 00:02:32,980
So this entire series of changes or this entire flow right here is what constitutes a controlled element

37
00:02:33,340 --> 00:02:34,510
with the factor we just did.

38
00:02:34,510 --> 00:02:40,030
We now have a controlled element because we are now going through those steps before we were not going

39
00:02:40,030 --> 00:02:40,730
through those steps.

40
00:02:40,750 --> 00:02:42,510
And we had a uncontrolled element.

41
00:02:42,520 --> 00:02:47,740
Now let's talk about exactly what the difference between the two is and why we prefer controlled elements.

42
00:02:47,740 --> 00:02:47,950
All right.

43
00:02:47,950 --> 00:02:49,220
So another quick diagram here.

44
00:02:50,150 --> 00:02:54,020
Now this is a diagram of the code we had before we just did that refactor.

45
00:02:54,020 --> 00:02:59,540
So like the code we had like two videos ago before we refactored it to be a controlled component.

46
00:02:59,540 --> 00:03:03,920
So let's consider the side Grahm with the older version the code on the left hand side I've got a diagram

47
00:03:03,950 --> 00:03:05,920
of what we call the re-act world.

48
00:03:05,960 --> 00:03:10,730
This is essentially all of our javascript code all of our components all of our classes all that stuff

49
00:03:11,270 --> 00:03:13,900
and then on the right hand side is the T.M. world.

50
00:03:13,940 --> 00:03:18,980
And this is essentially all of the HTL that is showing up inside of application and displaying some

51
00:03:18,980 --> 00:03:20,870
information to the user.

52
00:03:20,870 --> 00:03:26,870
Now with the old version of our code what would you say or how would you answer if I asked you What's

53
00:03:26,870 --> 00:03:28,090
the value of the input.

54
00:03:28,130 --> 00:03:34,840
Like right now I want to say right now I mean like basically at any instant in time well with the older

55
00:03:34,840 --> 00:03:39,640
version of our code the only way that we could somehow figure out what the value of our input was at

56
00:03:39,700 --> 00:03:47,530
any instant in time was to reach into the DOM find that input element and pull the value out of it.

57
00:03:47,590 --> 00:03:49,740
That was the only way that we could answer that question.

58
00:03:49,750 --> 00:03:52,590
We had to reach into the DOM and pull out the value.

59
00:03:52,810 --> 00:03:58,390
There was technically a time when our Riak component or our area code understood what the value of the

60
00:03:58,390 --> 00:03:59,180
input was.

61
00:03:59,260 --> 00:04:04,480
But that was only during the time that a user had actually typed something into the input and we had

62
00:04:04,480 --> 00:04:11,860
our callback vote so only during that very small that very slim period of time when our clock was running.

63
00:04:11,860 --> 00:04:18,610
Did the Riak component have any idea whatsoever what the value of the input was during all other periods

64
00:04:18,610 --> 00:04:19,490
in time.

65
00:04:19,630 --> 00:04:25,450
The source of truth so to speak or the source of data inside of our application was inside of our HTL

66
00:04:25,450 --> 00:04:28,480
document and it was not inside our component.

67
00:04:28,810 --> 00:04:30,720
And that's the key part to understand.

68
00:04:31,030 --> 00:04:37,250
You and I as developers we do not like to store information inside of our HTL elements.

69
00:04:37,450 --> 00:04:42,220
In the case that we had before before we refactored it over to be controlled the input tag itself was

70
00:04:42,220 --> 00:04:43,530
storing the value.

71
00:04:43,570 --> 00:04:48,780
It was the only thing inside of our entire application that knew what the value of the input was.

72
00:04:48,910 --> 00:04:51,010
And we don't like to do that.

73
00:04:51,040 --> 00:04:56,420
Instead we want to centralize all of the information that we have inside of our Riak component.

74
00:04:56,650 --> 00:04:58,090
That's what we want to strive towards.

75
00:04:58,090 --> 00:05:00,640
We want to make sure that they react side of our application.

76
00:05:00,670 --> 00:05:05,230
It is what is driving all of the data that is flowing through our app and we're not going to somehow

77
00:05:05,290 --> 00:05:07,900
store data inside the DOM.

78
00:05:07,930 --> 00:05:13,480
So let's look at the same diagram but after we refactored it to be controlled OK.

79
00:05:13,510 --> 00:05:15,280
So here's what is happening now.

80
00:05:15,640 --> 00:05:21,430
So now if I ask you exactly what the value of the input is at any instant in time you don't have to

81
00:05:21,430 --> 00:05:22,440
go over to the DOM.

82
00:05:22,450 --> 00:05:23,650
You don't have to look at the DOM.

83
00:05:23,650 --> 00:05:27,010
You don't have to somehow reference that input and pull the value out of it.

84
00:05:27,250 --> 00:05:30,370
Instead we can look directly at our component.

85
00:05:30,400 --> 00:05:37,180
We can look at it state object and see oh ok my component has a term of high there.

86
00:05:37,180 --> 00:05:40,340
That means that the value of my input must be high there.

87
00:05:40,510 --> 00:05:46,800
And we were able to answer this question without having to try to dive into the to that Dom.

88
00:05:46,820 --> 00:05:51,510
In fact if we try to go into the DOM and we looked at that input we would more or less be just troll

89
00:05:51,530 --> 00:05:53,890
like hey like go look at the state to get the current value.

90
00:05:53,890 --> 00:05:55,660
I don't know what it is at this point.

91
00:05:55,670 --> 00:06:00,770
We will not go into the DOM or find the input to find out what the current value is we're going to always

92
00:06:00,770 --> 00:06:06,610
just make use of our Riak component I guess that's the difference between a controlled and uncontrolled

93
00:06:06,610 --> 00:06:07,100
component.

94
00:06:07,120 --> 00:06:13,360
The key idea here is that we are storing our information inside of our components on our state property

95
00:06:13,570 --> 00:06:17,010
as opposed to storing information inside the dorm.

96
00:06:17,020 --> 00:06:19,530
That's the key thing to understand.

97
00:06:19,540 --> 00:06:23,570
Now the challenging part about this the part that seems really confusing in my opinion.

98
00:06:23,560 --> 00:06:26,110
Maybe you disagree with me maybe it's crystal clear.

99
00:06:26,110 --> 00:06:30,700
But I feel as though for a lot of people the hard thing to accept to your is that when the user types

100
00:06:30,760 --> 00:06:36,430
in the input the input knows what the text is you know the input contains that text.

101
00:06:36,430 --> 00:06:42,160
We then call on change right here and we inform our component like essentially after the fact of hey

102
00:06:42,190 --> 00:06:44,170
here's what the new text is in the input.

103
00:06:44,320 --> 00:06:49,960
And then when we read render the component we set the value on the input with essentially the value

104
00:06:49,960 --> 00:06:51,530
that is already in there.

105
00:06:51,580 --> 00:06:52,690
Remember the input.

106
00:06:52,690 --> 00:06:54,470
It knows what is being typed in there.

107
00:06:54,580 --> 00:06:59,380
But we're kind of like overwriting that and it's sticking to a new value back in and it's the same value

108
00:06:59,380 --> 00:07:00,930
that was already in there.

109
00:07:00,970 --> 00:07:04,960
So that's the part that I think for a lot of people is hard to kind of understand or accept we're kind

110
00:07:04,960 --> 00:07:07,730
of like doing more work than is necessary here.

111
00:07:07,840 --> 00:07:13,270
But again the entire idea is just to make sure that it's the re-act application driving and storing

112
00:07:13,270 --> 00:07:16,880
all of our data and not the HGL side of things.

113
00:07:16,990 --> 00:07:22,420
Now even when I tell you this you might say OK like sure we want react to dry everything and we want

114
00:07:22,420 --> 00:07:25,080
to store information in components rather than in the door.

115
00:07:25,090 --> 00:07:25,960
But you know what.

116
00:07:25,980 --> 00:07:26,870
I don't care about that.

117
00:07:26,890 --> 00:07:31,060
I've worked with other applications before where we store information in the dorm and everything works

118
00:07:31,060 --> 00:07:32,070
out just fine.

119
00:07:32,080 --> 00:07:33,600
Maybe you fall in that category.

120
00:07:33,820 --> 00:07:38,980
Well OK I accept that there are other frameworks out there other javascript frameworks that store information

121
00:07:39,010 --> 00:07:40,920
in the DOM and they do just fine.

122
00:07:41,290 --> 00:07:44,920
But all I can tell you is this is how we do things in the re-act world.

123
00:07:45,280 --> 00:07:50,740
The good thing about this approach is that it makes doing certain steps pretty easy and pretty straightforward.

124
00:07:50,740 --> 00:07:57,310
For example if I wanted to render my search bar with some default value inside the input I can very

125
00:07:57,310 --> 00:08:04,570
easily change the initialization of the state term right here to say like say hi there so now when my

126
00:08:04,570 --> 00:08:08,890
component first renders the input will be rendered with a value of.

127
00:08:08,950 --> 00:08:10,550
Hi there.

128
00:08:10,570 --> 00:08:16,390
So now if I flip back over we'll see that every time that my input first renders I see the text.

129
00:08:16,450 --> 00:08:18,930
Hi there inside there by default.

130
00:08:19,210 --> 00:08:21,540
And I of course I can change it if I want to.

131
00:08:21,760 --> 00:08:24,930
And then every time I refresh it I'll just default back to hi there.

132
00:08:26,080 --> 00:08:27,310
So that's kind of easy to do.

133
00:08:27,340 --> 00:08:30,140
You know it could very easily default the value of our search input.

134
00:08:30,190 --> 00:08:36,490
The other thing we can very easily do is manipulate the whatever the user is typing in there for every

135
00:08:36,490 --> 00:08:37,870
single key press that they enter.

136
00:08:37,900 --> 00:08:44,260
So for example let's say that we want to force this text input to always have capitalized values inside

137
00:08:44,290 --> 00:08:46,480
of it no matter what the user types.

138
00:08:46,480 --> 00:08:50,920
So we don't want to let the user to put in lowercase characters we always want to see uppercase like

139
00:08:50,920 --> 00:08:57,040
so to do that we would find right here where we get the callback for on change and we would say that

140
00:08:57,040 --> 00:09:02,830
we would take the user's value whatever they just typed in and we would just say to upper case we're

141
00:09:02,830 --> 00:09:06,150
going to take that value we're going to force it to be upper case.

142
00:09:06,350 --> 00:09:13,060
Then revenger the entire component render the input right here and force in a capitalized version of

143
00:09:13,060 --> 00:09:16,430
the value to it so I'll save this.

144
00:09:16,820 --> 00:09:20,680
And now when I type in here I don't have my caps lock key on or anything like that.

145
00:09:20,750 --> 00:09:28,010
I am forced to enter capitalized keys so certain operations get really really easy when you start using

146
00:09:28,010 --> 00:09:30,490
controlled components doing something like this right.

147
00:09:30,490 --> 00:09:37,280
You're forcing couples input would be not impossible to do with traditional HTL events like a traditional

148
00:09:37,280 --> 00:09:38,860
event listener on the input right.

149
00:09:38,900 --> 00:09:44,270
It's not impossible by any means but it would just be a little bit more challenging than it by using

150
00:09:44,300 --> 00:09:46,520
a controlled component as we are over here.

151
00:09:47,300 --> 00:09:47,700
OK.

152
00:09:47,770 --> 00:09:50,850
So I think we've spoken enough about controlled inputs.

153
00:09:51,070 --> 00:09:55,720
This is a topic that we're going to revisit many times throughout this course because it's not only

154
00:09:55,720 --> 00:10:04,140
for text inputs it's for many other type of elements like say a select option or radio buttons or checkboxes.

155
00:10:04,150 --> 00:10:09,250
All these different type of form inputs are all going to fall underneath this kind of controlled verse.

156
00:10:09,280 --> 00:10:10,430
Uncontrolled topic.

157
00:10:10,570 --> 00:10:13,160
So you'll get a lot of experience with this over time.

158
00:10:13,600 --> 00:10:13,810
All right.

159
00:10:13,820 --> 00:10:18,520
So lesing going to do here is remove the two upper case and I'll save.

160
00:10:18,670 --> 00:10:22,570
And now we're back to how we were before we could put in lowercase characters.

161
00:10:22,760 --> 00:10:22,980
OK.

162
00:10:22,990 --> 00:10:23,790
So 6 good.

163
00:10:23,890 --> 00:10:26,660
Let's take a pause right here and we'll continue in the next video.