In the last section we began discussing the concept of State and react. 2
Remember state is a plain javascript object that exists on any component that's a class based component 3
. 4
Each instance of a class based component has its own copy of states. 5
We initialize the state by defining the constructor method and setting the state as the start state 6
inside of it. 7
We decided the name of this first property that we're going to use is turn. 8
But these need the names of these properties aren't forced on us we could use any different property 9
neither we want. 10
And you'll see that here very shortly in this section we're going to continue making use of state by 11
recording the value of our input on the state to do so. 12
We're going to need to update our state inside of this function handler right here. 13
So instead of doing a council log we're going to update our state updating state is a little bit differently 14
different than creating it and it's really important to recognize the difference. 15
So in our constructor we said this dot state equals object. 16
This constructor function is the only time we will ever ever ever see code that looks like this right 17
here to manipulate our state. 18
And this is probably the barn number one like thing. 19
I want you to take away from this course is making sure that you understand how to manipulate state 20
so only inside of the constructor function do we change our state like this by just saying like this 21
dot state equals blah. 22
Everywhere else inside of all of our components we instead of using you know this dot state equals we'll 23
use a method called this start set state. 24
So let's to lead our console log here and we're going replace this with this dot set state and we pass 25
an object that contains the new state that we want to have or do we want to give our component. 26
I'll pass an object. 27
That's a term and the value is going to be the new value of the input which is event. 28
Target value like so. 29
OK so I'm going to save this. 30
And let's talk about this one more time to review so I make sure I'd drive it home in the constructor 31
. 32
We said this state equals an object everywhere else inside of our component to change our state. 33
We use this start set state so we should never have something that looks like this starts state term 34
equals you know event dot target dot value that never do that. 35
We always manipulate our state with this dot set state using said state is what really allows us to 36
maintain continuity. 37
You know behind the scenes re-act is doing a tremendous amount of stuff with a state object. 38
And so if we just change the value. 39
Well re-act doesn't really know that the value change. 40
So instead we use this method to inform react. 41
Hey the state is changing and here's what the new state is. 42
OK. 43
So let's go ahead and save this and flip on over. 44
Refresh and you'll see if we can still type just fine. 45
Nothing like really changes here. 46
Well so what's like the side effects of recording state. 47
You know what are we why are we doing this at all what do we get out of this. 48
Well I'll show you let's add a little bit more to this input component. 49
I'm going to put the input on a new line and we'll wrap our GSX with some parentheses. 50
Don't forget the semi-colon at the end like so. 51
So we'll add a div around the input and then we'll put some plain text in here. 52
We'll say value of the input and then we're going to reference a javascript variable and sort of inside 53
of our GSX. 54
And if you remember earlier I said I'm going to mention this many times whenever we reference a javascript 55
variable we wrapped it with curly braces inside of GSX. 56
So inside of here we'll write this state DOT term. 57
Notice that I'm writing this dot state term because I'm not modifying the value of term. 58
I'm just referencing it. 59
I'm just saying hey here's what the value is. 60
So it's OK to write this dot state that term to reference it just never do something like this not state 61
that term equals five or four or what have you. 62
OK so I going to save this man. 63
Let's see what happens when we re render this now. 64
OK so I've got value of the input and I'm going to start typing. 65
Awesome. 66
So as I type the text is showing up after Valeo the input as well. 67
So what's this tell us look back over to our code here. 68
So whenever we update the input element whenever we change the value of it this function right here 69
runs because it's our event handler. 70
We set the state. 71
This dot state DOT term with the new value of the input. 72
Whenever we update our state whenever we call this start set state it causes our component to automatically 73
rewriter and push all those all the updated information from the render method into the dome because 74
our render method makes reference to the start state DOT term. 75
Every time that the component read renderers we get the updated this dot state dot term in the double 76
. 77
So that is like the full circle of state you know I am convinced that as time goes on you know it's 78
going to seem kind of confusing but if you condense it all down to this you know very simple example 79
right here and starts to make a lot more sense. 80
Basically whenever you want to update our component in some fashion be thinking state. 81
OK. 82
So this looks good right here. 83
I'm going to go ahead and remove this value the input right here because we're not going to be this 84
will be the div right now though we'll probably use it for styling later on. 85
So I going to say this let's refresh make sure everything still works. 86
Yeah it looks good. 87
OK let's wrap up state with a final review in the next section.