The last section we figured out how to handle users typing into a input tag. 2
We did this by first defining the input handler which is a function and then we passed it to the property 3
onchange inside of the GSX task. 4
We passed it specifically to the onchange event because any function passed to it will automatically 5
be called when the inputs normal Change event is triggered. 6
In this section we're going to start by talking about one of the most confusing topics in re-act state 7
figure is probably better to bring this up sooner rather than later. 8
State is almost definitely one of the hardest to understand topics and react and you'll find that it 9
comes into you the front and center and we start concentrating on redux as well. 10
So in this section we're going to focus on making sure that you have a solid grasp on exactly what state 11
is. 12
So let me start by defining it state as a plain javascript object that is used to record and react to 13
user events each class based component that we define has its own state object whenever a component 14
state is changed the component immediately renders and also forces all of its children to render as 15
well. 16
So if search bar had some states and it changed the render functional would be rewritten. 17
And if we had other components inside of yours Well those would be re rendered as well. 18
Before we ever use state inside of a component we need to initialize the state object to initialize 19
state. 20
We set the property state to a plain javascript object inside of the class's constructor method and 21
. 22
Okay that's super confusing. 23
I know crazy confusing let's start throwing some code down and discuss what's happening. 24
So inside a search bar I'm going to add a new method. 25
At the very top. 26
And we're going to call it constructor. 27
I will put some code down here and we'll talk exactly what's going on. 28
We had a argument called props and then we're going to call super props and then will say this state 29
equals an object where a term is an empty string like so. 30
OK. 31
So this bit of code right here is going to start to get really familiar really quickly. 32
This is how we define States or re-initialize States in a class based component. 33
Remember functional components do not have state only class basic components do. 34
So here's the summary. 35
All javascript classes have a special function called constructor. 36
The constructor function is the first and only function called automatically whenever a new instance 37
of the class is created. 38
So you can imagine that you know in reality this function gets called all the time because it's called 39
whenever we create a new instance of search bar like right here inside of index Dot. 40
Yes 41
constructor function is reserved for doing some set up inside of our class like initializing variables 42
and initializing state and stuff like that. 43
So one weird thing that's going on here in here is this super right here. 44
Remember how our component search bar extends component while component itself has its own constructor 45
function. 46
When we define a method that is already defined on the parent class which is component we can call that 47
parent method on the parent class by calling super. 48
I know that's confusing. 49
Please bear with me for a bit and we'll focus on state for now and we'll talk more about super later 50
on. 51
If you ever object oriented programming background are you ever taken like C-s classes. 52
You know we're doing here is we're calling the parent method here with super. 53
If you're not familiar with any of that you know really don't sweat it. 54
You can kind of view this as a little bit of black magic for right now if you don't call super here 55
you'll end up with an air. 56
So you don't sweat it. 57
It always catch it for you. 58
The second expression here is the one that we really care about. 59
It's much more interesting to do a state. 60
So whenever we use state we initialize it by creating a new object and assigning it to this start state 61
the object we pass will also contain properties that we want to record on the state. 62
In this case right here we want to record the term term. 63
Really the I should say property term on state terms being search short for like search term basically 64
. 65
So whenever the user updates the search input this is the property right here this term is the property 66
you want one update that or record that change on. 67
So over time you could kind of imagine you know as you were going to do in the next section here very 68
shortly as a user starts typing inside the input we want to update this dot state DOT term to not be 69
empty string but to be the value of the input. 70
OK. 71
So let's continue talking about state in the next section.