1 00:00:00,820 --> 00:00:04,090 In the last section we introduce state into our app component. 2 00:00:04,300 --> 00:00:09,070 So we in Parliament to the constructor function we called Super inside of it and then we initialized 3 00:00:09,070 --> 00:00:15,160 state by creating an object with this key value pair of lat short for latitude and we initialize the 4 00:00:15,160 --> 00:00:20,770 value of latitude to be null the value of moment specifically that we don't know what the latitude is 5 00:00:20,770 --> 00:00:26,970 just yet but we will know at some point in time in the future after we get our current position after 6 00:00:26,970 --> 00:00:31,320 creating the state object we then assigned it to the this Stut state property. 7 00:00:31,320 --> 00:00:36,690 So now that it's assigned to this state we can freely reference this state object and the properties 8 00:00:36,690 --> 00:00:40,440 inside of it from any function inside of our app component. 9 00:00:40,440 --> 00:00:45,020 So for example down inside of my render method where we try to printout our latitude. 10 00:00:45,210 --> 00:00:50,010 I could put in right here a set of curly braces because we're going to reference a javascript variable 11 00:00:50,340 --> 00:00:54,950 and I'll say this does state latt. 12 00:00:54,980 --> 00:00:58,940 Now if we save this and refresh the browser right now it's going to still appear like there's nothing 13 00:00:58,940 --> 00:01:01,860 right here because we initialized it to be No. 14 00:01:01,970 --> 00:01:07,100 But very quickly let's just replace it with some imaginary number like say my latitude is now 40. 15 00:01:07,220 --> 00:01:14,060 So if I save this I can now flip back over to my browser and I'll see that my latitude is 40 writes 16 00:01:14,860 --> 00:01:17,230 and then replace the 40 now with No. 17 00:01:17,550 --> 00:01:23,430 So the general idea is that we might make use of this state property inside of our GSX or other functions 18 00:01:23,490 --> 00:01:25,930 inside of our component. 19 00:01:25,980 --> 00:01:31,890 So now that we understand how we can initialize our state and then we have a very rudimentary idea of 20 00:01:31,890 --> 00:01:34,370 how to reference it inside of some GSX. 21 00:01:34,410 --> 00:01:39,930 The last thing we need to do is to make sure that after we succeed in getting our position we somehow 22 00:01:40,140 --> 00:01:43,200 update this lab property on our state object. 23 00:01:43,200 --> 00:01:50,900 Remember the big key to this thing is that any time that we update our states object right here our 24 00:01:50,900 --> 00:01:54,590 component will almost instantly render itself. 25 00:01:54,590 --> 00:01:59,870 So if we can somehow get our location with get current position right here and then update our state 26 00:01:59,870 --> 00:02:02,200 object are rendered method should we run. 27 00:02:02,210 --> 00:02:06,320 And we should see a new latitude printed out on the screen. 28 00:02:06,330 --> 00:02:06,600 All right. 29 00:02:06,610 --> 00:02:11,380 Now before we think about having to update our state right there like that there's one other little 30 00:02:11,380 --> 00:02:13,060 change that I want to make to our class. 31 00:02:13,090 --> 00:02:15,580 That's kind of unrelated from all the state stuff. 32 00:02:16,340 --> 00:02:21,980 The rendered method inside of a component is going to be called somewhat frequently or even very very 33 00:02:21,980 --> 00:02:22,970 frequently. 34 00:02:23,000 --> 00:02:28,100 We're going to learn more about where to put where the best place is to put calls that takes some amount 35 00:02:28,100 --> 00:02:32,080 of time like this get get you can get current position function right here. 36 00:02:32,210 --> 00:02:37,490 But right now I just want you to understand that we never ever want to start to initialize some work 37 00:02:37,760 --> 00:02:41,560 or some request or anything like that from a call in the render method. 38 00:02:41,630 --> 00:02:45,950 And the reason for that is that the rendered method is going to be getting called all the dang time 39 00:02:46,250 --> 00:02:48,820 way more frequently than you would ever imagine. 40 00:02:48,830 --> 00:02:56,660 So rather than leaving this get current position call inside of here I'm going to cut it and move it 41 00:02:56,660 --> 00:03:02,740 up to my state or to my constructor and I can put it right underneath the state call. 42 00:03:03,060 --> 00:03:07,530 So now this makes sure that the instant that our app component shows up on the screen we're the instant 43 00:03:07,530 --> 00:03:12,120 that we create a instance of it I should say we're going to attempt to start to get the users current 44 00:03:12,120 --> 00:03:13,300 location. 45 00:03:13,710 --> 00:03:18,930 Then later on when we call the render method again to update our component we're not going to accidentally 46 00:03:19,050 --> 00:03:21,580 double fetch our current location. 47 00:03:22,400 --> 00:03:22,820 OK. 48 00:03:23,190 --> 00:03:28,410 So now we're going to start to focus on somehow making sure that we can update our state object after 49 00:03:28,500 --> 00:03:30,190 we get our current location. 50 00:03:30,540 --> 00:03:35,480 Remember that the first argument to get current position is a callback function. 51 00:03:35,490 --> 00:03:40,110 So this right here is a function that will be called at some point in time in the future rather than 52 00:03:40,350 --> 00:03:42,540 just doing our council log inside of your. 53 00:03:42,840 --> 00:03:44,870 I'm going to delete the console log. 54 00:03:46,080 --> 00:03:50,100 And I'm going to put a function body in here just so we can see very clearly see the code that we're 55 00:03:50,100 --> 00:03:51,410 putting in here. 56 00:03:51,420 --> 00:03:57,150 So on this line of code right here I want to take my latitude out of that position object and I want 57 00:03:57,150 --> 00:04:01,630 to use the latitude alone to update my state object. 58 00:04:01,710 --> 00:04:07,470 Now a quick reminder any time that we want to update our state object we're going to always use the 59 00:04:07,470 --> 00:04:09,490 function set States. 60 00:04:09,540 --> 00:04:15,240 So let me show you how we are going to update our state object using set state inside this function. 61 00:04:15,480 --> 00:04:24,720 I'm going to call this set state and I'm going to pass it an object that has the update to state that 62 00:04:24,720 --> 00:04:30,390 I want to make in this case I want to use the position object and some property in there to update the 63 00:04:30,480 --> 00:04:32,710 Lappe property on my state object. 64 00:04:32,970 --> 00:04:37,960 So inside of that state I'm going to say Latt is position and what was it. 65 00:04:37,980 --> 00:04:49,300 I think it was positioned dot coords dot latitude so to position that cowherds latitude like so and 66 00:04:49,310 --> 00:04:49,660 that's it. 67 00:04:49,670 --> 00:04:50,930 That's all we have to do. 68 00:04:51,110 --> 00:04:55,590 Now something that I really want you to notice here to update our state object. 69 00:04:55,640 --> 00:05:02,650 We called Set States said state is a function that gets put on our app component automatically when 70 00:05:02,650 --> 00:05:05,170 we extended re-act dot component. 71 00:05:05,290 --> 00:05:09,670 So you might be kind of noticing here that there is a lot of kind of very specially named properties 72 00:05:09,670 --> 00:05:10,390 in functions. 73 00:05:10,390 --> 00:05:15,400 You have to memorize inside of these Riak opponents stuff like the name of the render function is one 74 00:05:15,400 --> 00:05:16,120 of them. 75 00:05:16,120 --> 00:05:17,700 The constructor function is another. 76 00:05:17,780 --> 00:05:21,010 And then right here is an example of a function that you need to memorize. 77 00:05:21,010 --> 00:05:24,070 You need to remember that this thing is called Set States. 78 00:05:24,090 --> 00:05:27,960 Anytime that you want to update your state you're going to call set state. 79 00:05:28,000 --> 00:05:34,020 Now what I really want to focus on here is that in order to update our state object we did not you know 80 00:05:34,060 --> 00:05:35,200 put a huge come in here. 81 00:05:35,200 --> 00:05:42,770 We did not write something like this but state Latt equals position chords. 82 00:05:42,860 --> 00:05:44,780 Latitude this is bad. 83 00:05:44,800 --> 00:05:45,430 This is awful. 84 00:05:45,430 --> 00:05:47,290 We never ever want to do this. 85 00:05:47,290 --> 00:05:51,310 We never want to do a direct assignment to our state object. 86 00:05:51,490 --> 00:05:56,320 The one single exception to that rule and I'm being I'm trying to be as clear as possible. 87 00:05:56,320 --> 00:06:01,670 The one exception to that rule is when we initialize our state inside the constructor function. 88 00:06:01,900 --> 00:06:03,590 Let's put a comment here that varies. 89 00:06:03,590 --> 00:06:05,840 This typically spells that out. 90 00:06:05,890 --> 00:06:12,180 This is the only time we do direct assignment. 91 00:06:13,020 --> 00:06:14,510 To this state. 92 00:06:14,700 --> 00:06:19,470 Any other time that we want to change update or otherwise manipulate our state property. 93 00:06:19,470 --> 00:06:24,830 We are always going to call set state as opposed to doing direct assignment like this right here. 94 00:06:25,140 --> 00:06:29,530 So I'm going to delete that line right there to make sure I never accidentally run something like that. 95 00:06:30,470 --> 00:06:30,700 OK. 96 00:06:30,720 --> 00:06:35,520 So believe it or not the code that we have right here should be working it should somehow render our 97 00:06:35,520 --> 00:06:36,560 component on the screen. 98 00:06:36,600 --> 00:06:42,450 And then after we get our current location we're going to call this set States remember anytime that 99 00:06:42,450 --> 00:06:46,700 we call set States right here and in time do we update our state. 100 00:06:46,710 --> 00:06:49,160 It's going to cause our component to Insley render. 101 00:06:49,200 --> 00:06:55,780 And so once we get our render method called the second time we should see some latitude appear with 102 00:06:55,780 --> 00:06:57,680 our newly fetched state property. 103 00:06:58,730 --> 00:07:03,740 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. 104 00:07:04,130 --> 00:07:10,630 So back over here I can see that I did in fact get the correct latitude to appear inside of my component. 105 00:07:10,640 --> 00:07:12,440 All right so that's it. 106 00:07:12,500 --> 00:07:15,400 That's the first run through a state that we're going to go through. 107 00:07:15,430 --> 00:07:19,100 How we're going to go through a ton more uses a state throughout this course. 108 00:07:19,100 --> 00:07:23,540 So at this point if you're at all confused don't even remotely sweat it because we're going to get a 109 00:07:23,540 --> 00:07:29,900 ton of opportunities to understand exactly what state is now before you start to write any other code. 110 00:07:29,990 --> 00:07:35,540 I want to go through a kind of long flow diagram to make sure that you really understand exactly what 111 00:07:35,540 --> 00:07:36,300 happened. 112 00:07:36,490 --> 00:07:37,760 So let's take a quick pause right here. 113 00:07:37,760 --> 00:07:41,930 When we come back the next section we're going to walk to the exact series of steps that occurred inside 114 00:07:41,930 --> 00:07:42,750 of our component.