In the last section we hooked up our input in the search bar to the components state by updating the 2
state whenever the Change event occurred because the entire component to remember remember the fifth 3
time now we only update our state by calling this start set state. 4
The only time that we ever manually change it with something like this start state equals is inside 5
of the constructor. 6
In this section we're going to take the idea of state one step further by creating what's called a controlled 7
field or a controlled input controlled form element a control field is a form element like an input 8
whose value is set by the state rather than the other way around. 9
So think about it for a second think about like the kind of sequence of events that we've witnessed 10
so far. 11
Right now whenever our input changes it causes the state to be updated. 12
Right. 13
Our input tells the state what it should be. 14
That's the key here. 15
The input changing tells the state hey you need to change. 16
You can imagine that like you know there's one surely guy right here input trying to tell his boss state 17
hey you need to change you. 18
I'm not going to I'm not going to change. 19
You should. 20
And the ideal way in an ideal world is really be the other way around. 21
The state should tell the input what the current value should be. 22
Let's update our text input to get its value from the state. 23
And they're going to talk about what the implications of this approach are. 24
And you know why we want to do this way at all. 25
So the update is really straight forward. 26
I'm going to break the input tag into some separate lines here and we're going to add another property 27
here. 28
When I say value equals this dot state DOT term. 29
OK. 30
I'm going to refresh the browser now and I'm going to type something and it looks like hey you know 31
it still works. 32
Everything is the same right. 33
Nothing's really changed here. 34
So did anything really change. 35
Well let's check. 36
I'm going to take the onchange property and I'm just going to delete all of it. 37
So I saw the closing impot tag here. 38
You know don't delete that and then save this and then refresh. 39
And now I'm in the input and I'm trying to type in Nothing's happening. 40
You could probably even hear my keyboard in the background and really pound on the keyboard here. 41
So big difference can't type anything at all right. 42
So what's happening. 43
Well and to control Z to get our own change back here and save it. 44
Just make sure we got that. 45
So what's happening here. 46
First remember this is an inverted undo that deleted line here. 47
So here's what's going on. 48
When we tell the input that its value is provided by this starts Deepcut term we turn it into what's 49
called a controlled component so input right here is now a controlled component of a controlled form 50
element a control component. 51
How has has its value set by state so its value only ever changes when the state changes. 52
So remember before we had input saying hey stay you and you need to update. 53
I know I'm not going to it you need to update when we go into this type of controlled form or control 54
form element controlled input. 55
It's the other way around the input changes. 56
It still tells the state you know hey you know here's here's my new value Here's what the change was 57
but rather then the input saying like hey you know here's what that value is and you know my values 58
that too. 59
It's the other way around. 60
This dot state does not set state causes the component to render and when it re-enters the value of 61
the input is set to the new value of this start state term. 62
So let's go through the flow the order of operations here. 63
Our app starts up and renders an instance of search bar over in search bar search bar. 64
We get a new instance of it created. 65
And so the constructor is called in this dot state that term is set to an empty string so term is an 66
empty string. 67
The component renders the value of the input is set to retrieve its value from this start state term 68
. 69
So its initial value is an empty string and we start off totally empty. 70
So the component then sits around for a little bit you know surender on the page whatever. 71
Waiting until the user enters some text when the user enters some text. 72
The state is updated to this state. 73
This does state that term is set equal to the change text value. 74
At that point in time the value the input has not changed. 75
That's the key. 76
When the when this onchange handler write your runs the value the input has not actually changed. 77
We've only called the input handler the event handler with the new event or we see with the new value 78
right here the event handler runs updating this dot state dot term to be that new value whenever set 79
status called our component Imedi rerun DERSE. 80
So when the render function is called again the value of the input is updated to receive the new value 81
of this start state term. 82
Finally the component finishes rendering and the new value of the input is then visible on the screen 83
. 84
So the real key there the real like jump in logic is that when the user types something they didn't 85
actually change the input value they only triggered any event. 86
And because we updated the state with that event that causes the value the input to change. 87
OK. 88
So that's all that's the you know the super confusing loop dulu. 89
Crazy part. 90
You're probably right and they're saying what the heck is the difference here and what's the value of 91
this. 92
What's this doing for us. 93
Well in terms of react this is really how we treat data. 94
Right. 95
We don't react or we don't have a kind of imperative flow of data throughout our application. 96
We don't say you know hey oh user change something I need to go figure out what the value is right. 97
It's a much more declarative syntax. 98
We say the value of the input is equal to the state in a more general term. 99
You know turning answer the question why is it so useful for us. 100
Well it allows us to do a lot more very useful things. 101
For example let's say that we want to have some default input inside of the input. 102
We don't not a placeholder you know not like you know a great text that goes away when the user clicks 103
or we would have like an actual value pre-populated there. 104
So I'll say like you know starting value as our initial state now I'll save this. 105
Refresh it and you'll see that I get this initial starting value here and I can go ahead and change 106
it. 107
So it allows us to do stuff like that very easily. 108
It also allows us to read the value of the input much more easily than if we had like a you know if 109
we were say using Jay Querrey let's say that we had some button inside of this component and we wanted 110
to read the valued input whenever the user clicks the button in service doing something like. 111
OK. 112
You know let's use a query to find the input and then read the value out of it. 113
So of doing that which is kind of you know it's a Housel. 114
We can just say this does Steve doctor. 115
We always know that's the correct value of the input at any given time. 116
So I know it's been pretty confusing but this is you know the controlled component stuff is probably 117
the most challenging aspect of state. 118
We're going to be using controlled inputs controlled components a lot throughout this entire course 119
. 120
So if it's still confusing right now don't sweat it. 121
We're going to cover it several times. 122
OK. 123
So that's enough on state for now. 124
Let's continue in the next section