1 00:00:00,650 --> 00:00:04,430 In the last couple of videos we've been learning about some new topics in the world of re-act including 2 00:00:04,430 --> 00:00:07,280 classes States and lifecycle methods. 3 00:00:07,550 --> 00:00:12,350 And in that process we've learned a lot but we've also gotten away from really moving our application 4 00:00:12,350 --> 00:00:14,310 forward and developing it out. 5 00:00:14,330 --> 00:00:17,950 So in this section I want to get start to get back on track. 6 00:00:17,990 --> 00:00:21,490 Remember that we have already created a component called season display. 7 00:00:21,740 --> 00:00:28,100 So in this video I want to import this season display into the index G-S file and then down inside the 8 00:00:28,100 --> 00:00:31,270 render method rather than printing out the latitude right there. 9 00:00:31,280 --> 00:00:33,740 I want to show the season display instead. 10 00:00:33,740 --> 00:00:36,550 Remember the goal here is not to show the user their latitude. 11 00:00:36,560 --> 00:00:41,140 The goal is to show the current season either summer or winter. 12 00:00:41,270 --> 00:00:45,050 So to get started at the very top the index dot file. 13 00:00:45,080 --> 00:00:53,480 I'm going to import season display from Season display like So remember we already created that component 14 00:00:53,570 --> 00:00:54,990 and it's inside the same directory. 15 00:00:55,010 --> 00:00:58,180 Which is why we use the dot slash right there. 16 00:00:58,230 --> 00:01:04,020 So now down inside of my render method I'm going to find where we are currently printing out the lead 17 00:01:04,020 --> 00:01:04,510 today. 18 00:01:04,680 --> 00:01:06,430 I'm going to remove that. 19 00:01:06,660 --> 00:01:12,870 I'm going to instead create an instance of the season display component and when we create this thing 20 00:01:12,900 --> 00:01:17,630 we need to tell the seasoned display what the latitude of our user is. 21 00:01:17,820 --> 00:01:22,590 And then it will be up to the season display to figure out whether or not it is summer or winter and 22 00:01:22,620 --> 00:01:24,810 adjust its styling appropriately. 23 00:01:24,990 --> 00:01:30,480 So we have to take our latitude which remember it's stored inside of our state object and somehow get 24 00:01:30,480 --> 00:01:37,020 that property get that value of state down into the seasoned display component to do so we're going 25 00:01:37,020 --> 00:01:42,060 to use the same props system that we've already taken a look at in one of the earlier applications we 26 00:01:42,060 --> 00:01:43,250 put together. 27 00:01:43,320 --> 00:01:50,810 So I'm going to add on a new prop with a name of simply Latt again short for latitude and then I will 28 00:01:50,820 --> 00:01:56,020 assign it a value of this dot state DOT lat. 29 00:01:56,120 --> 00:02:02,570 So we are taking a property from the states on the app component and passing it as a prop down into 30 00:02:02,570 --> 00:02:04,460 the season display. 31 00:02:04,460 --> 00:02:09,960 And this is where the two systems of props and state start to get just a little bit confusing. 32 00:02:10,070 --> 00:02:12,990 So to make sure that things are really clear right. 33 00:02:13,010 --> 00:02:20,620 Yes we can take state from one component and pass it as a prop down to the child in this case the seasoned 34 00:02:20,620 --> 00:02:21,740 display. 35 00:02:21,770 --> 00:02:26,190 So now the seasoned display is going to be very closely linked with the app component. 36 00:02:26,850 --> 00:02:34,000 Any time that we call set state and cited the parent component of app and update the lead dude the app 37 00:02:34,030 --> 00:02:35,970 component is going to render itself. 38 00:02:35,980 --> 00:02:41,770 Remember any time we call set state the component updates itself that's going to cause the season display 39 00:02:41,770 --> 00:02:44,080 to be updated as well. 40 00:02:44,080 --> 00:02:49,750 Because if that latitude property right there changes the new latitude value is going to be put into 41 00:02:49,780 --> 00:02:54,090 season display and season display will be really rendered as well. 42 00:02:54,100 --> 00:02:58,590 So at this point I've been saying many times that any time we call said state that component renders 43 00:02:58,600 --> 00:02:59,350 itself. 44 00:02:59,620 --> 00:03:05,230 But in addition the component will also read render any children that it is showing as well. 45 00:03:05,350 --> 00:03:07,430 We'll see some good examples of this over time. 46 00:03:08,240 --> 00:03:11,580 Now let's flip on over to our seasoned display component. 47 00:03:11,670 --> 00:03:17,310 So here's the season display file remember any time that we pass a prop into a functional component 48 00:03:17,520 --> 00:03:22,470 it's going to show up inside of an object that is the first argument to that functional component and 49 00:03:22,470 --> 00:03:24,970 we always refer to it as props. 50 00:03:24,990 --> 00:03:31,230 So inside of that object there should be a last property that contains our users latitude just to make 51 00:03:31,230 --> 00:03:32,530 sure that it is there. 52 00:03:32,580 --> 00:03:38,790 I'm going to do a console log of Propst Latt like so and then I'm going to save this and check out the 53 00:03:38,790 --> 00:03:43,780 browser and just make sure that the latitude is correctly showing up inside the season display. 54 00:03:45,730 --> 00:03:49,660 So once I flip back over here I can very easily see Yup I got the console log there. 55 00:03:49,700 --> 00:03:54,980 That means that these seasoned display is being told what the current latitude is. 56 00:03:54,990 --> 00:03:59,010 So now that we've got that latitude we're going to start to write some code inside of this component 57 00:03:59,220 --> 00:04:02,960 to make sure that we can determine whether or not it is summer or winter. 58 00:04:03,030 --> 00:04:06,450 Also depending upon the month which we have to figure out here as well. 59 00:04:06,800 --> 00:04:08,070 So let's take a quick pause right here. 60 00:04:08,100 --> 00:04:11,790 When we come back the next section will start to write out some code to determine the current month 61 00:04:12,090 --> 00:04:17,170 and then use the latitude in the current month to decide whether or not it is summer or winter. 62 00:04:17,220 --> 00:04:18,870 So quick Pozzo I'll see you in just a minute.