In the last section we able to handle an error occurring during our geolocation requests.
But like I mentioned at the end it's probably not for the best for us to just put the word air right
here.
It's definitely pretty unsettling for our users.
So in this section we're going to figure out how to handle the case in which we do not have an air where
the case in which we do.
Now I want to first begin by thinking about all the different combinations of state that we can have
inside of our Complan right now in total.
There's three different combinations of latitude in air message that we could run into.
So we can run into a situation where we have a latitude but we do not have an error message.
If we have a latitude and no error message we probably want to show the user our latitude.
You know it just prints on the screen.
Remember that the final version of our app is not going to show the latitude.
But right now let's just try to show the lead to then the second case we might have our latitude or
something not have the latitude but we might have an error.
So this would occur in the case that a user denied our geolocation request.
So if that's the case then I want to show the error and not show the latitude not even show the TX latitude
or anything like that.
I just want to show an error message by itself and then finally I also want to handle the case in which
our application is still loading up and still making that geolocation request remember right now I am
faking my location.
So whenever I do a request you see that it loads up instantaneously and I'm doing this just so that
as you see me doing this work you don't have to sit around and watch me wait for five seconds for something
to show up.
But when the user first uses our application it is going to take about two three four or five seconds
for something to load up during that time.
We probably want to tell the user that they are waiting for something we want to let them know hey like
just hold on a second.
We're going to show you something interesting in just a moment.
So I want to handle all three of these different scenarios.
So to do so we're going to flip back over to my code editor and we're going to find my render method.
So in order to kind of conditionally return some different GSX all we have to do is put a simple collection
of statements into this render method.
Now this is going to be the most simple and straightforward way of doing this.
And we're going to eventually come back and refactor it into a slightly more elegant way.
But let's start simple.
So I'm going to delete everything inside the render method for right now and I'll put in three different
statements actually.
And what does two if statements.
First off I will say if we have an error message
and we did not have a latitude then I want to return a diff that contains my error message.
So I'll say error this state error message like so so that's going to handle this case right here the
case in which we do not have a latitude but we have an error message.
So in that case I want to show an air.
So if we have an error message and know that great show The air is straightforward enough.
So now I'll get myself a little bit space I'll put down my next statement.
I'll say if I do not have an error message
and I have a latitude so nervous in this case I don't have the knot on there.
I've got the knot right there in the knot right there.
So if I have a latitude then I want to return a div with the latitude.
This does LET.
And then finally for the third case down here this would be the scenario in which I have no latitude
and no no error message I want to show loading.
So for this case down here this would be kind of like a catchall I could turn these into some if else
statements then put an else for the final case.
But personally I like to just do if statements with returns in them and then for the final Keystone
here I don't really need an if statement.
I can just say if we failed these two checks then chances are we have neither latitude nor error message.
So I'll say simply return a div that says Loading.
Like so OK so that's it.
Now this right here is what I refer to as conditional rendering.
We are returning different GSX depending upon the state or the props of our components.
We're going to use conditional rendering quite a bit throughout this course and this is the most simple
and straightforward way to go about it.
Even in this application once we understand how this block right here works we're going to refactor
it into something that looks a little bit nicer than what you see.
All right so I'm gonna flip back or my browser.
Now I see that I already have my latitude on here I can do another refresh and I see just the latitude
by itself.
So let's test out the two other scenarios here.
I'm going to reset my location by setting it to ask default and then reload the page.
Now in the background here we do not yet have a error message or a latitude so I know this darn pop
up right here makes it hard to see.
But again I do an inspect you'll see that it says right there loaded and well I mean you can see the
background.
So I do not have an error message.
I do not have a lot of tude so I'm going show loading but if I then allow it's going to turn into latitude.
And now I'll try the other case so I'll do another Ask default.
I will refresh.
Now I'm going to block it this time around.
And now I see the error instead.
OK so that's pretty much it.
So now we now have a better idea of how to do conditional rendering.
And like I said this is something we're going to practice many many times throughout this course.
All right so let's take a quick pause right here.
We'll continue in the next section and will continue working on our.