In the last section we started talking about the state system in react.
They're just talking about these rules is not super helpful and it probably is not going to make a lot
of sense until we actually write some code.
So in this video we're going to start to Reflektor our app component to make use of state.
The first thing we're going to do is to make sure that we initialize our state when the component is
first created after that.
Well then make sure that we eventually make use of our state inside the render method.
And then at some point in the future we'll also make sure that we update our state with set state.
After we successfully retrieve our location but that's just kind of a quick preview of what's going
to go on.
Let's actually get to it.
All right so I can flip back or it's my code editor now inside of our class component right here.
We already have one method called the render method that render method is required for every single
Riadh component we create.
And one thing that I want to highlight is that that is a requirement of react react says we have to
define render if we don't define this function right here.
Re-act is going to throw an error in this going get angry at us and say hey you don't have a render
method that's returning any GSX.
There's another function that we can define inside of our class based components.
This is another very special function as a very special name.
Just as the render method right here has a special name but this other function is not required by react
and it's more of a function that belongs to the javascript language itself as opposed to some very specific
thing the name of this function is the constructor function.
So this is a specially named function that is particular to the javascript language not specific to
react in a javascript class that JELLETT the constructor function is the very first function that is
going to be called any time an instance of this class is created.
So in other words any time that we create a new instance of the app component and show it on the screen.
This constructor function is going to be automatically and instantly called before anything else.
And so that makes it a very good location for us to initialize our state when our component is first
created.
Now this is not the only way to initialize state.
I'm going to show you another method of initializing state in just a moment but first now we'll just
stick with this way because you're going to see a lot of blog post documentation that shows you how
to initialize state using this method right here.
Now when we define the constructor method it's going to be automatically called with the prop's object.
And yes this is the same prop's object that we saw previously with our functional component before we
do anything else inside this constructor function.
We have to go through one little kind of ceremonial step and I say ceremonial because it's basically
just required of us we have to do this we have to call a function called super and we have to pass in
the props like so.
So what does the super thing.
You'll notice that we don't have any other function inside this file called Super So what is it.
Well remember our app component is extending or borrowing functionality from the re-act component base
class right here.
This base class has a constructor function of its own that goes through some amount of setup or has
some code inside of it to set up our real component for us when we define a constructor function inside
of our app class.
We are essentially overriding or replacing the constructor function that is inside of the reactor component
class.
But we still want to make sure that all the set up code inside of this thing's constructor function
still gets called.
So to make sure that the parents or re-act components constructor function gets called we call super
with props.
Super is a reference to the parent's constructor function and that's all it is.
So like I said this is a little bit of ceremony.
We have to do it every single time that we define our constructor function inside of a class based component.
If we don't we are going to very quickly see an error message that says hey you got to call super.
And as a matter of fact you.
Let's just do it right now.
Delete that.
I'm going to save this file just so you can see this message really quickly.
All right.
And so you'll see right here we get this really nasty messages says super hasn't been cold.
So essentially we just have to put super with props in there and then that error message will very quickly
go away.
All right so now we have to find the constructor.
We can get on to business.
The entire reason we define that constructor function was so that we could initialize our state object.
So in order to initialize our state object underneath that super call Soopers always going to be the
first thing in here so underneath it I'm going to say this that states equals an object like so.
All right so this object right here.
That is state object.
It's going to eventually contain some different pieces of data some different properties that are very
important and relevant to our component that we're putting together.
So like I mentioned previously Right now the most relevant piece of data that we have is our latitude.
So we might want to initialize our state object to include a property called Latitude.
Now we're going to abbreviate latitude as simply lat Salat is short for latitude when we initialize
a property inside the state object.
We're going to usually default it to some reasonable or sensible value.
In this case we know that our latitude is going to eventually be a number like a decimal number whenever
we want to eventually have a number as a property on our state object but we don't have it yet.
Like at this point time right here we don't know what the lead to do is just yet.
We will usually default the value to be no so a value of no means essentially we don't know what the
latitude is it yet we will know eventually but we don't know what it is.
Right now.
All right.
So we're going to take a pause right here after saving this file at this point.
We have defined our constructor method and we have initialized our state object by creating a javascript
object assigning a property or a key value pair to it and then assigning the result to that to this
state.
So let's take a pause right here.
When we come back the next section we're going to continue with the three factor of introducing state
into our app component.
So quick pause and I'll see you in just a minute.