You've now got a pretty good idea of how the state system works even if you don't have a good idea don't
worry we're going to get so much practice about it.
I'm going to repeat a lot of these same concepts over and over and over again to make sure that you
really understand them.
So we're not ready to start continuing on our application.
Before we start to focus on taking this latitude in determining what hemisphere our user is in or anything
like that I want to first focus on the second Colback that we have provided to the get current position
call.
Remember this is going to take some air from that request and right now just console log it out.
I found that over time a lot of people in the re-act world is particularly when they're starting to
learn re-act kind of assume that the application is always going to kind of work the way they expect.
And a lot of times you kind of get into a bad habit of ignoring errors in not kind of treating them
the way that we should to actually handle them and tell the user that hey something just went wrong.
So rather than going ahead and continuing on with our application and making use the latitude I want
to instead make sure that we handle this error message in some reasonable way.
So how are we going to do that.
Well it's going be pretty straightforward if anything goes wrong with that get current position request
and we enter this ere callback right here.
We probably are going to want to re render our component and directly tell her user Hey something bad
just happened and we can't tell you what the current location is or what your location is.
So how are we going to somehow render our component.
Oh yeah that's right States.
Any time we want to render our component we're going to update our state.
So I'm going to add a new property to our state object right here.
I'm going to add a new property called error message and I'm going to default this thing to be an empty
string.
So when our component is first created We're going to have an empty error message.
But then if anything goes wrong while we are attempting to get our current position we're going to update
this error message property right here.
When we update the error message property.
It's going to cause that component to automatically render and we can attempt to show the error message
inside of our render method.
So let's give this a shot.
Inside of the air callback right here we're going to remove that console log and I'm going to replace
it actually and what I actually kind of forget at the top of my head what properties are inside that
air so let's do just a quick refresh right now and get that thing to console one more time just so we
can remember how to get the message out there.
All right.
I going to go back over here.
I'm going to reset my location preferences to ask like so or then refreshed the page and this time I'm
going to block the request and we'll get that position there.
So it looks like it is a message that tells us exactly what went wrong.
So I'm going to take that console log out or replace it with a function body like so.
And inside of your I'll call this set States or pass in an object in a list out the property they want
to update.
In this case I want to update the error message property on state and I want to set it equal to air
dot message so r dumb message like so now you might tell something kind of interesting between these
two set state calls right now.
Whenever we update our state we are not required to update every property in it.
Updating our state is an additive process when we call set state with error message like so it's not
going to somehow delete our latitude.
It's not going to remove it.
It's going to leave the latitude untouched.
So when we call set States we are only adding or changing properties on our states.
We are never removing or deleting properties.
OK.
So now when we get this there we're going to call that state with the error message which means we can
now reference that error message down inside of our render method.
So down here I'm going to put a set of parentheses like so.
All Then expand the div and right now we'll keep it really simple.
We'll replace it with something.
It's a little bit better in just a second but I'll say air is going to be this state DOT air.
I mean what we call it we call the error message and then just to make sure that these things show up
on separate lines I'm going to put a B tag between the two a brake line essentially just to make sure
they show up separately.
Now one quick thing I want to double check just a second ago I'm going to retype the line of code that
we had just a minute ago you don't need to type this I just want to show you something very quickly
because this is a very common error that I see all the time.
People will do something like You know we had latitude blah blah whatever inside there and then at the
end of that line we had a semi call in like so.
So I very frequently see people do the following.
They will say oh I want to make this a multi-line block of GSX so I'm going to put a parentheses right
there or then indent that and I'll put a print to see right there like so now can you spot the air.
It's very subtle and this is why people make this mistake all the time.
Accidentally left the semi colon on the end.
If you leave the semi-colon on the end like so you're going to end up with an error message and that
error message is frequently pretty hard to decipher.
So anytime that you go from a multi law or a single line GSX statement to a multi-line one like so make
sure you clean up that semi-colon.
Speaking of which check back up here and make sure you mean that semi-coma.
All right so I'm going to delete that stuff.
Now let's save this thing.
I'm going to flip back over.
And now we see right here it says user tonight geolocation.
That's because I currently have my geolocation blocked but I can again reset this to ask.
Default like so I'll refresh the page.
And now I have no Err no error message yet.
I'll try blocking it and it tells me user denied geolocation all refreshed this or reset it one more
time or reload and then this time I'm going to allow.
And so this time I get my latitude to appear and my air is not present perfect.
Well almost perfect.
Chances are we don't want to tell her user all the time like there's in there if we just put the word
right there.
Our users just going to think that there is an error.
So I think that it would be really nice if we could figure out some way to only sometimes show the error
message and if we don't have an error message we should not show this thing at all.
Let's take a quick pause and we'll figure out how to take care of that in the next video.