1

00:00:01,130  -->  00:00:07,080
In the last section we hooked up our input in the search bar to the components state by updating the

2

00:00:07,080  -->  00:00:13,740
state whenever the Change event occurred because the entire component to remember remember the fifth

3

00:00:13,740  -->  00:00:18,670
time now we only update our state by calling this start set state.

4

00:00:19,170  -->  00:00:25,110
The only time that we ever manually change it with something like this start state equals is inside

5

00:00:25,110  -->  00:00:26,580
of the constructor.

6

00:00:27,090  -->  00:00:32,760
In this section we're going to take the idea of state one step further by creating what's called a controlled

7

00:00:32,760  -->  00:00:40,650
field or a controlled input controlled form element a control field is a form element like an input

8

00:00:40,950  -->  00:00:45,180
whose value is set by the state rather than the other way around.

9

00:00:45,180  -->  00:00:49,800
So think about it for a second think about like the kind of sequence of events that we've witnessed

10

00:00:49,800  -->  00:00:51,090
so far.

11

00:00:51,300  -->  00:00:56,090
Right now whenever our input changes it causes the state to be updated.

12

00:00:56,180  -->  00:00:57,190
Right.

13

00:00:57,450  -->  00:01:00,730
Our input tells the state what it should be.

14

00:01:01,080  -->  00:01:02,010
That's the key here.

15

00:01:02,010  -->  00:01:05,070
The input changing tells the state hey you need to change.

16

00:01:05,070  -->  00:01:11,880
You can imagine that like you know there's one surely guy right here input trying to tell his boss state

17

00:01:12,180  -->  00:01:13,330
hey you need to change you.

18

00:01:13,330  -->  00:01:14,790
I'm not going to I'm not going to change.

19

00:01:14,790  -->  00:01:16,550
You should.

20

00:01:16,590  -->  00:01:20,720
And the ideal way in an ideal world is really be the other way around.

21

00:01:21,000  -->  00:01:24,810
The state should tell the input what the current value should be.

22

00:01:25,320  -->  00:01:28,560
Let's update our text input to get its value from the state.

23

00:01:28,560  -->  00:01:31,810
And they're going to talk about what the implications of this approach are.

24

00:01:31,980  -->  00:01:34,200
And you know why we want to do this way at all.

25

00:01:34,530  -->  00:01:36,620
So the update is really straight forward.

26

00:01:36,620  -->  00:01:42,660
I'm going to break the input tag into some separate lines here and we're going to add another property

27

00:01:42,660  -->  00:01:43,430
here.

28

00:01:43,560  -->  00:01:48,870
When I say value equals this dot state DOT term.

29

00:01:49,620  -->  00:01:50,180
OK.

30

00:01:50,430  -->  00:01:57,530
I'm going to refresh the browser now and I'm going to type something and it looks like hey you know

31

00:01:57,540  -->  00:01:58,400
it still works.

32

00:01:58,410  -->  00:01:59,310
Everything is the same right.

33

00:01:59,310  -->  00:02:01,020
Nothing's really changed here.

34

00:02:01,020  -->  00:02:03,080
So did anything really change.

35

00:02:03,600  -->  00:02:05,510
Well let's check.

36

00:02:06,030  -->  00:02:09,900
I'm going to take the onchange property and I'm just going to delete all of it.

37

00:02:09,900  -->  00:02:11,670
So I saw the closing impot tag here.

38

00:02:11,670  -->  00:02:17,350
You know don't delete that and then save this and then refresh.

39

00:02:17,370  -->  00:02:23,070
And now I'm in the input and I'm trying to type in Nothing's happening.

40

00:02:23,070  -->  00:02:27,180
You could probably even hear my keyboard in the background and really pound on the keyboard here.

41

00:02:27,210  -->  00:02:30,340
So big difference can't type anything at all right.

42

00:02:30,420  -->  00:02:31,520
So what's happening.

43

00:02:31,860  -->  00:02:35,310
Well and to control Z to get our own change back here and save it.

44

00:02:35,310  -->  00:02:36,330
Just make sure we got that.

45

00:02:36,330  -->  00:02:37,760
So what's happening here.

46

00:02:37,770  -->  00:02:42,630
First remember this is an inverted undo that deleted line here.

47

00:02:42,630  -->  00:02:43,890
So here's what's going on.

48

00:02:44,190  -->  00:02:50,490
When we tell the input that its value is provided by this starts Deepcut term we turn it into what's

49

00:02:50,490  -->  00:02:56,310
called a controlled component so input right here is now a controlled component of a controlled form

50

00:02:56,340  -->  00:02:59,310
element a control component.

51

00:02:59,310  -->  00:03:05,860
How has has its value set by state so its value only ever changes when the state changes.

52

00:03:06,090  -->  00:03:10,540
So remember before we had input saying hey stay you and you need to update.

53

00:03:10,570  -->  00:03:16,290
I know I'm not going to it you need to update when we go into this type of controlled form or control

54

00:03:16,290  -->  00:03:19,410
form element controlled input.

55

00:03:19,410  -->  00:03:22,720
It's the other way around the input changes.

56

00:03:22,770  -->  00:03:27,810
It still tells the state you know hey you know here's here's my new value Here's what the change was

57

00:03:28,530  -->  00:03:34,350
but rather then the input saying like hey you know here's what that value is and you know my values

58

00:03:34,350  -->  00:03:35,120
that too.

59

00:03:35,250  -->  00:03:36,840
It's the other way around.

60

00:03:37,410  -->  00:03:45,300
This dot state does not set state causes the component to render and when it re-enters the value of

61

00:03:45,300  -->  00:03:49,400
the input is set to the new value of this start state term.

62

00:03:49,590  -->  00:03:53,700
So let's go through the flow the order of operations here.

63

00:03:53,700  -->  00:04:03,660
Our app starts up and renders an instance of search bar over in search bar search bar.

64

00:04:03,660  -->  00:04:05,280
We get a new instance of it created.

65

00:04:05,280  -->  00:04:11,850
And so the constructor is called in this dot state that term is set to an empty string so term is an

66

00:04:11,850  -->  00:04:13,350
empty string.

67

00:04:13,470  -->  00:04:20,530
The component renders the value of the input is set to retrieve its value from this start state term

68

00:04:20,550  -->  00:04:20,790
.

69

00:04:21,030  -->  00:04:26,520
So its initial value is an empty string and we start off totally empty.

70

00:04:26,520  -->  00:04:30,990
So the component then sits around for a little bit you know surender on the page whatever.

71

00:04:30,990  -->  00:04:36,770
Waiting until the user enters some text when the user enters some text.

72

00:04:36,990  -->  00:04:41,020
The state is updated to this state.

73

00:04:41,190  -->  00:04:44,810
This does state that term is set equal to the change text value.

74

00:04:45,150  -->  00:04:48,560
At that point in time the value the input has not changed.

75

00:04:48,570  -->  00:04:49,580
That's the key.

76

00:04:49,860  -->  00:04:56,820
When the when this onchange handler write your runs the value the input has not actually changed.

77

00:04:56,850  -->  00:05:03,570
We've only called the input handler the event handler with the new event or we see with the new value

78

00:05:03,570  -->  00:05:11,160
right here the event handler runs updating this dot state dot term to be that new value whenever set

79

00:05:11,160  -->  00:05:15,300
status called our component Imedi rerun DERSE.

80

00:05:15,600  -->  00:05:23,250
So when the render function is called again the value of the input is updated to receive the new value

81

00:05:23,250  -->  00:05:25,360
of this start state term.

82

00:05:25,380  -->  00:05:30,540
Finally the component finishes rendering and the new value of the input is then visible on the screen

83

00:05:30,550  -->  00:05:30,730
.

84

00:05:30,900  -->  00:05:36,060
So the real key there the real like jump in logic is that when the user types something they didn't

85

00:05:36,060  -->  00:05:41,060
actually change the input value they only triggered any event.

86

00:05:41,090  -->  00:05:46,260
And because we updated the state with that event that causes the value the input to change.

87

00:05:46,260  -->  00:05:46,540
OK.

88

00:05:46,560  -->  00:05:49,660
So that's all that's the you know the super confusing loop dulu.

89

00:05:49,680  -->  00:05:51,070
Crazy part.

90

00:05:51,180  -->  00:05:54,480
You're probably right and they're saying what the heck is the difference here and what's the value of

91

00:05:54,480  -->  00:05:55,400
this.

92

00:05:55,470  -->  00:05:56,810
What's this doing for us.

93

00:05:57,120  -->  00:06:01,790
Well in terms of react this is really how we treat data.

94

00:06:01,800  -->  00:06:02,120
Right.

95

00:06:02,130  -->  00:06:07,410
We don't react or we don't have a kind of imperative flow of data throughout our application.

96

00:06:07,410  -->  00:06:13,550
We don't say you know hey oh user change something I need to go figure out what the value is right.

97

00:06:13,740  -->  00:06:15,280
It's a much more declarative syntax.

98

00:06:15,290  -->  00:06:21,410
We say the value of the input is equal to the state in a more general term.

99

00:06:21,470  -->  00:06:23,860
You know turning answer the question why is it so useful for us.

100

00:06:24,030  -->  00:06:26,370
Well it allows us to do a lot more very useful things.

101

00:06:26,370  -->  00:06:30,680
For example let's say that we want to have some default input inside of the input.

102

00:06:30,950  -->  00:06:35,400
We don't not a placeholder you know not like you know a great text that goes away when the user clicks

103

00:06:35,400  -->  00:06:37,970
or we would have like an actual value pre-populated there.

104

00:06:38,160  -->  00:06:45,000
So I'll say like you know starting value as our initial state now I'll save this.

105

00:06:45,000  -->  00:06:50,490
Refresh it and you'll see that I get this initial starting value here and I can go ahead and change

106

00:06:50,490  -->  00:06:51,210
it.

107

00:06:51,210  -->  00:06:53,720
So it allows us to do stuff like that very easily.

108

00:06:53,850  -->  00:06:59,060
It also allows us to read the value of the input much more easily than if we had like a you know if

109

00:06:59,070  -->  00:07:05,910
we were say using Jay Querrey let's say that we had some button inside of this component and we wanted

110

00:07:05,910  -->  00:07:10,430
to read the valued input whenever the user clicks the button in service doing something like.

111

00:07:10,460  -->  00:07:11,450
OK.

112

00:07:11,730  -->  00:07:16,110
You know let's use a query to find the input and then read the value out of it.

113

00:07:16,130  -->  00:07:18,340
So of doing that which is kind of you know it's a Housel.

114

00:07:18,450  -->  00:07:20,500
We can just say this does Steve doctor.

115

00:07:20,550  -->  00:07:25,710
We always know that's the correct value of the input at any given time.

116

00:07:25,830  -->  00:07:31,750
So I know it's been pretty confusing but this is you know the controlled component stuff is probably

117

00:07:31,820  -->  00:07:33,640
the most challenging aspect of state.

118

00:07:33,750  -->  00:07:38,670
We're going to be using controlled inputs controlled components a lot throughout this entire course

119

00:07:38,670  -->  00:07:38,730
.

120

00:07:38,730  -->  00:07:40,970
So if it's still confusing right now don't sweat it.

121

00:07:40,980  -->  00:07:42,740
We're going to cover it several times.

122

00:07:43,020  -->  00:07:43,730
OK.

123

00:07:44,190  -->  00:07:45,590
So that's enough on state for now.

124

00:07:45,600  -->  00:07:46,930
Let's continue in the next section