1
00:00:00,750 --> 00:00:05,470
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

2
00:00:05,470 --> 00:00:07,520
worry we're going to get so much practice about it.

3
00:00:07,600 --> 00:00:11,620
I'm going to repeat a lot of these same concepts over and over and over again to make sure that you

4
00:00:11,650 --> 00:00:13,050
really understand them.

5
00:00:13,100 --> 00:00:15,830
So we're not ready to start continuing on our application.

6
00:00:16,180 --> 00:00:21,310
Before we start to focus on taking this latitude in determining what hemisphere our user is in or anything

7
00:00:21,310 --> 00:00:26,530
like that I want to first focus on the second Colback that we have provided to the get current position

8
00:00:26,530 --> 00:00:27,310
call.

9
00:00:27,370 --> 00:00:33,690
Remember this is going to take some air from that request and right now just console log it out.

10
00:00:33,820 --> 00:00:38,530
I found that over time a lot of people in the re-act world is particularly when they're starting to

11
00:00:38,530 --> 00:00:44,540
learn re-act kind of assume that the application is always going to kind of work the way they expect.

12
00:00:44,680 --> 00:00:49,420
And a lot of times you kind of get into a bad habit of ignoring errors in not kind of treating them

13
00:00:49,420 --> 00:00:54,350
the way that we should to actually handle them and tell the user that hey something just went wrong.

14
00:00:54,680 --> 00:00:59,260
So rather than going ahead and continuing on with our application and making use the latitude I want

15
00:00:59,260 --> 00:01:04,600
to instead make sure that we handle this error message in some reasonable way.

16
00:01:04,600 --> 00:01:05,980
So how are we going to do that.

17
00:01:06,280 --> 00:01:11,620
Well it's going be pretty straightforward if anything goes wrong with that get current position request

18
00:01:12,010 --> 00:01:14,120
and we enter this ere callback right here.

19
00:01:14,290 --> 00:01:20,200
We probably are going to want to re render our component and directly tell her user Hey something bad

20
00:01:20,200 --> 00:01:24,870
just happened and we can't tell you what the current location is or what your location is.

21
00:01:25,120 --> 00:01:29,810
So how are we going to somehow render our component.

22
00:01:30,310 --> 00:01:32,190
Oh yeah that's right States.

23
00:01:32,280 --> 00:01:37,090
Any time we want to render our component we're going to update our state.

24
00:01:37,200 --> 00:01:41,470
So I'm going to add a new property to our state object right here.

25
00:01:41,550 --> 00:01:47,700
I'm going to add a new property called error message and I'm going to default this thing to be an empty

26
00:01:47,700 --> 00:01:49,140
string.

27
00:01:49,210 --> 00:01:53,460
So when our component is first created We're going to have an empty error message.

28
00:01:53,590 --> 00:01:58,720
But then if anything goes wrong while we are attempting to get our current position we're going to update

29
00:01:58,720 --> 00:02:00,820
this error message property right here.

30
00:02:01,690 --> 00:02:03,570
When we update the error message property.

31
00:02:03,580 --> 00:02:08,110
It's going to cause that component to automatically render and we can attempt to show the error message

32
00:02:08,240 --> 00:02:10,030
inside of our render method.

33
00:02:10,360 --> 00:02:11,870
So let's give this a shot.

34
00:02:12,940 --> 00:02:19,020
Inside of the air callback right here we're going to remove that console log and I'm going to replace

35
00:02:19,020 --> 00:02:22,800
it actually and what I actually kind of forget at the top of my head what properties are inside that

36
00:02:22,800 --> 00:02:28,470
air so let's do just a quick refresh right now and get that thing to console one more time just so we

37
00:02:28,650 --> 00:02:31,250
can remember how to get the message out there.

38
00:02:31,270 --> 00:02:31,520
All right.

39
00:02:31,540 --> 00:02:32,740
I going to go back over here.

40
00:02:34,000 --> 00:02:40,600
I'm going to reset my location preferences to ask like so or then refreshed the page and this time I'm

41
00:02:40,600 --> 00:02:43,810
going to block the request and we'll get that position there.

42
00:02:43,990 --> 00:02:47,820
So it looks like it is a message that tells us exactly what went wrong.

43
00:02:49,180 --> 00:02:54,920
So I'm going to take that console log out or replace it with a function body like so.

44
00:02:55,030 --> 00:03:00,550
And inside of your I'll call this set States or pass in an object in a list out the property they want

45
00:03:00,550 --> 00:03:01,390
to update.

46
00:03:01,420 --> 00:03:09,160
In this case I want to update the error message property on state and I want to set it equal to air

47
00:03:09,340 --> 00:03:16,270
dot message so r dumb message like so now you might tell something kind of interesting between these

48
00:03:16,270 --> 00:03:18,190
two set state calls right now.

49
00:03:18,310 --> 00:03:24,010
Whenever we update our state we are not required to update every property in it.

50
00:03:24,010 --> 00:03:29,290
Updating our state is an additive process when we call set state with error message like so it's not

51
00:03:29,290 --> 00:03:31,520
going to somehow delete our latitude.

52
00:03:31,630 --> 00:03:32,980
It's not going to remove it.

53
00:03:33,100 --> 00:03:35,830
It's going to leave the latitude untouched.

54
00:03:35,920 --> 00:03:40,360
So when we call set States we are only adding or changing properties on our states.

55
00:03:40,370 --> 00:03:43,260
We are never removing or deleting properties.

56
00:03:45,650 --> 00:03:45,880
OK.

57
00:03:45,890 --> 00:03:49,470
So now when we get this there we're going to call that state with the error message which means we can

58
00:03:49,470 --> 00:03:52,980
now reference that error message down inside of our render method.

59
00:03:53,010 --> 00:03:57,880
So down here I'm going to put a set of parentheses like so.

60
00:03:58,610 --> 00:04:04,410
All Then expand the div and right now we'll keep it really simple.

61
00:04:04,430 --> 00:04:05,500
We'll replace it with something.

62
00:04:05,510 --> 00:04:11,510
It's a little bit better in just a second but I'll say air is going to be this state DOT air.

63
00:04:11,630 --> 00:04:16,890
I mean what we call it we call the error message and then just to make sure that these things show up

64
00:04:16,890 --> 00:04:21,750
on separate lines I'm going to put a B tag between the two a brake line essentially just to make sure

65
00:04:21,810 --> 00:04:23,540
they show up separately.

66
00:04:23,550 --> 00:04:27,660
Now one quick thing I want to double check just a second ago I'm going to retype the line of code that

67
00:04:27,660 --> 00:04:30,840
we had just a minute ago you don't need to type this I just want to show you something very quickly

68
00:04:31,080 --> 00:04:34,220
because this is a very common error that I see all the time.

69
00:04:34,290 --> 00:04:39,270
People will do something like You know we had latitude blah blah whatever inside there and then at the

70
00:04:39,270 --> 00:04:42,010
end of that line we had a semi call in like so.

71
00:04:42,180 --> 00:04:45,270
So I very frequently see people do the following.

72
00:04:45,270 --> 00:04:51,570
They will say oh I want to make this a multi-line block of GSX so I'm going to put a parentheses right

73
00:04:51,570 --> 00:04:56,900
there or then indent that and I'll put a print to see right there like so now can you spot the air.

74
00:04:56,910 --> 00:05:00,330
It's very subtle and this is why people make this mistake all the time.

75
00:05:00,450 --> 00:05:02,870
Accidentally left the semi colon on the end.

76
00:05:03,060 --> 00:05:06,900
If you leave the semi-colon on the end like so you're going to end up with an error message and that

77
00:05:06,900 --> 00:05:09,600
error message is frequently pretty hard to decipher.

78
00:05:09,750 --> 00:05:15,840
So anytime that you go from a multi law or a single line GSX statement to a multi-line one like so make

79
00:05:15,840 --> 00:05:17,940
sure you clean up that semi-colon.

80
00:05:17,970 --> 00:05:22,500
Speaking of which check back up here and make sure you mean that semi-coma.

81
00:05:22,530 --> 00:05:24,410
All right so I'm going to delete that stuff.

82
00:05:24,420 --> 00:05:25,470
Now let's save this thing.

83
00:05:25,560 --> 00:05:27,840
I'm going to flip back over.

84
00:05:28,010 --> 00:05:31,370
And now we see right here it says user tonight geolocation.

85
00:05:31,370 --> 00:05:36,760
That's because I currently have my geolocation blocked but I can again reset this to ask.

86
00:05:36,760 --> 00:05:39,790
Default like so I'll refresh the page.

87
00:05:39,830 --> 00:05:42,450
And now I have no Err no error message yet.

88
00:05:42,710 --> 00:05:49,070
I'll try blocking it and it tells me user denied geolocation all refreshed this or reset it one more

89
00:05:49,070 --> 00:05:52,460
time or reload and then this time I'm going to allow.

90
00:05:52,640 --> 00:05:57,700
And so this time I get my latitude to appear and my air is not present perfect.

91
00:05:57,920 --> 00:05:59,690
Well almost perfect.

92
00:05:59,690 --> 00:06:04,280
Chances are we don't want to tell her user all the time like there's in there if we just put the word

93
00:06:04,490 --> 00:06:05,170
right there.

94
00:06:05,180 --> 00:06:08,140
Our users just going to think that there is an error.

95
00:06:08,150 --> 00:06:13,280
So I think that it would be really nice if we could figure out some way to only sometimes show the error

96
00:06:13,280 --> 00:06:17,810
message and if we don't have an error message we should not show this thing at all.

97
00:06:17,810 --> 00:06:21,180
Let's take a quick pause and we'll figure out how to take care of that in the next video.