In the last section we introduce state into our app component.
So we in Parliament to the constructor function we called Super inside of it and then we initialized
state by creating an object with this key value pair of lat short for latitude and we initialize the
value of latitude to be null the value of moment specifically that we don't know what the latitude is
just yet but we will know at some point in time in the future after we get our current position after
creating the state object we then assigned it to the this Stut state property.
So now that it's assigned to this state we can freely reference this state object and the properties
inside of it from any function inside of our app component.
So for example down inside of my render method where we try to printout our latitude.
I could put in right here a set of curly braces because we're going to reference a javascript variable
and I'll say this does state latt.
Now if we save this and refresh the browser right now it's going to still appear like there's nothing
right here because we initialized it to be No.
But very quickly let's just replace it with some imaginary number like say my latitude is now 40.
So if I save this I can now flip back over to my browser and I'll see that my latitude is 40 writes
and then replace the 40 now with No.
So the general idea is that we might make use of this state property inside of our GSX or other functions
inside of our component.
So now that we understand how we can initialize our state and then we have a very rudimentary idea of
how to reference it inside of some GSX.
The last thing we need to do is to make sure that after we succeed in getting our position we somehow
update this lab property on our state object.
Remember the big key to this thing is that any time that we update our states object right here our
component will almost instantly render itself.
So if we can somehow get our location with get current position right here and then update our state
object are rendered method should we run.
And we should see a new latitude printed out on the screen.
All right.
Now before we think about having to update our state right there like that there's one other little
change that I want to make to our class.
That's kind of unrelated from all the state stuff.
The rendered method inside of a component is going to be called somewhat frequently or even very very
frequently.
We're going to learn more about where to put where the best place is to put calls that takes some amount
of time like this get get you can get current position function right here.
But right now I just want you to understand that we never ever want to start to initialize some work
or some request or anything like that from a call in the render method.
And the reason for that is that the rendered method is going to be getting called all the dang time
way more frequently than you would ever imagine.
So rather than leaving this get current position call inside of here I'm going to cut it and move it
up to my state or to my constructor and I can put it right underneath the state call.
So now this makes sure that the instant that our app component shows up on the screen we're the instant
that we create a instance of it I should say we're going to attempt to start to get the users current
location.
Then later on when we call the render method again to update our component we're not going to accidentally
double fetch our current location.
OK.
So now we're going to start to focus on somehow making sure that we can update our state object after
we get our current location.
Remember that the first argument to get current position is a callback function.
So this right here is a function that will be called at some point in time in the future rather than
just doing our council log inside of your.
I'm going to delete the console log.
And I'm going to put a function body in here just so we can see very clearly see the code that we're
putting in here.
So on this line of code right here I want to take my latitude out of that position object and I want
to use the latitude alone to update my state object.
Now a quick reminder any time that we want to update our state object we're going to always use the
function set States.
So let me show you how we are going to update our state object using set state inside this function.
I'm going to call this set state and I'm going to pass it an object that has the update to state that
I want to make in this case I want to use the position object and some property in there to update the
Lappe property on my state object.
So inside of that state I'm going to say Latt is position and what was it.
I think it was positioned dot coords dot latitude so to position that cowherds latitude like so and
that's it.
That's all we have to do.
Now something that I really want you to notice here to update our state object.
We called Set States said state is a function that gets put on our app component automatically when
we extended re-act dot component.
So you might be kind of noticing here that there is a lot of kind of very specially named properties
in functions.
You have to memorize inside of these Riak opponents stuff like the name of the render function is one
of them.
The constructor function is another.
And then right here is an example of a function that you need to memorize.
You need to remember that this thing is called Set States.
Anytime that you want to update your state you're going to call set state.
Now what I really want to focus on here is that in order to update our state object we did not you know
put a huge come in here.
We did not write something like this but state Latt equals position chords.
Latitude this is bad.
This is awful.
We never ever want to do this.
We never want to do a direct assignment to our state object.
The one single exception to that rule and I'm being I'm trying to be as clear as possible.
The one exception to that rule is when we initialize our state inside the constructor function.
Let's put a comment here that varies.
This typically spells that out.
This is the only time we do direct assignment.
To this state.
Any other time that we want to change update or otherwise manipulate our state property.
We are always going to call set state as opposed to doing direct assignment like this right here.
So I'm going to delete that line right there to make sure I never accidentally run something like that.
OK.
So believe it or not the code that we have right here should be working it should somehow render our
component on the screen.
And then after we get our current location we're going to call this set States remember anytime that
we call set States right here and in time do we update our state.
It's going to cause our component to Insley render.
And so once we get our render method called the second time we should see some latitude appear with
our newly fetched state property.
All right so I'm going to save this and I'll flip back with the browser and we'll see how we're doing.
So back over here I can see that I did in fact get the correct latitude to appear inside of my component.
All right so that's it.
That's the first run through a state that we're going to go through.
How we're going to go through a ton more uses a state throughout this course.
So at this point if you're at all confused don't even remotely sweat it because we're going to get a
ton of opportunities to understand exactly what state is now before you start to write any other code.
I want to go through a kind of long flow diagram to make sure that you really understand exactly what
happened.
So let's take a quick pause right here.
When we come back the next section we're going to walk to the exact series of steps that occurred inside
of our component.