1 00:00:01,230 --> 00:00:02,130 ‫Next up, 2 00:00:02,130 --> 00:00:05,313 ‫let's actually render the received weather data. 3 00:00:06,570 --> 00:00:10,200 ‫And for that let's create a brand new component. 4 00:00:10,200 --> 00:00:13,743 ‫And I will actually do that again here in the same file. 5 00:00:15,420 --> 00:00:17,763 ‫So let's call this one here weather. 6 00:00:20,250 --> 00:00:25,250 ‫And so it again extends React.Component 7 00:00:28,710 --> 00:00:33,030 ‫and as usually we start out with the render method 8 00:00:33,030 --> 00:00:34,770 ‫which again is called each time 9 00:00:34,770 --> 00:00:37,470 ‫that the component is rendered. 10 00:00:37,470 --> 00:00:42,180 ‫And then from here, let's just return a div. 11 00:00:42,180 --> 00:00:47,180 ‫And then for now, let's just write an h2 Weather. 12 00:00:49,590 --> 00:00:50,790 ‫All right. 13 00:00:50,790 --> 00:00:52,950 ‫And so now of course we need to include 14 00:00:52,950 --> 00:00:56,340 ‫this component here in our JSX. 15 00:00:56,340 --> 00:01:00,420 ‫So let's do that and let's do so conditionally. 16 00:01:00,420 --> 00:01:03,870 ‫So only when there actually is some weather data 17 00:01:03,870 --> 00:01:06,543 ‫then we want to display the weather component. 18 00:01:07,620 --> 00:01:12,620 ‫So let's say this.state.weather. 19 00:01:13,050 --> 00:01:15,750 ‫But this is not enough actually, 20 00:01:15,750 --> 00:01:20,550 ‫because by default this is also an object, right? 21 00:01:20,550 --> 00:01:25,170 ‫And so we actually need to read some property from this 22 00:01:25,170 --> 00:01:26,970 ‫so to see if it exists. 23 00:01:26,970 --> 00:01:28,800 ‫So let's for now comment this out 24 00:01:28,800 --> 00:01:32,073 ‫and run our code again so that. 25 00:01:33,660 --> 00:01:36,480 ‫Ah, no, we are not logging it through console anymore 26 00:01:36,480 --> 00:01:40,683 ‫but we can still take a look at it here in our dev tools. 27 00:01:42,960 --> 00:01:45,180 ‫So let's then say here 28 00:01:45,180 --> 00:01:48,723 ‫if this.state.weather.weathercode exists 29 00:01:52,080 --> 00:01:54,450 ‫so this array here, 30 00:01:54,450 --> 00:01:57,900 ‫this can only exist if the weather does exist. 31 00:01:57,900 --> 00:01:59,940 ‫And so if that's the case 32 00:01:59,940 --> 00:02:03,363 ‫then let's render the weather component. 33 00:02:04,830 --> 00:02:08,280 ‫And as a prop let's actually paste in the weather 34 00:02:08,280 --> 00:02:09,543 ‫that we want to render. 35 00:02:11,340 --> 00:02:14,193 ‫And then also the location. 36 00:02:16,200 --> 00:02:18,390 ‫And here of course it's not weather, 37 00:02:18,390 --> 00:02:21,690 ‫this is how we would do it in normal functional components. 38 00:02:21,690 --> 00:02:26,690 ‫But here we need to do this.state.weather. 39 00:02:26,700 --> 00:02:29,340 ‫So of course I'm actually no longer used 40 00:02:29,340 --> 00:02:31,020 ‫to writing code like this, 41 00:02:31,020 --> 00:02:33,843 ‫so this is a bit of a change for me as well. 42 00:02:34,950 --> 00:02:37,620 ‫So we're pasting in weather and location 43 00:02:37,620 --> 00:02:41,253 ‫and so then we can receive this year as props, 44 00:02:42,420 --> 00:02:44,100 ‫but more about that later. 45 00:02:44,100 --> 00:02:46,560 ‫For now, let's see if our component actually 46 00:02:46,560 --> 00:02:49,770 ‫gets rendered as soon as the data arrives. 47 00:02:49,770 --> 00:02:52,920 ‫And yeah, so in our componentry 48 00:02:52,920 --> 00:02:54,723 ‫now we also have the weather. 49 00:02:55,860 --> 00:02:56,693 ‫Now, okay. 50 00:02:56,693 --> 00:02:59,670 ‫And so now let's take those props. 51 00:02:59,670 --> 00:03:03,240 ‫And in class components there's actually no easy way 52 00:03:03,240 --> 00:03:06,030 ‫of destructuring all the received props. 53 00:03:06,030 --> 00:03:09,420 ‫So we can only do that in each method separately. 54 00:03:09,420 --> 00:03:13,080 ‫But first of all, let's actually see how we receive props 55 00:03:13,080 --> 00:03:14,850 ‫in a component like this. 56 00:03:14,850 --> 00:03:19,090 ‫And so let's log to the console this.props 57 00:03:21,540 --> 00:03:24,000 ‫and so if we click here now 58 00:03:24,000 --> 00:03:28,200 ‫then we should get, yeah, here it is. 59 00:03:28,200 --> 00:03:31,260 ‫So here is the props object which contains the weather 60 00:03:31,260 --> 00:03:32,673 ‫and the location. 61 00:03:33,570 --> 00:03:37,533 ‫And actually here we want the display location. 62 00:03:39,090 --> 00:03:40,473 ‫Just like this. 63 00:03:41,520 --> 00:03:44,790 ‫And now let's actually take all this data here 64 00:03:44,790 --> 00:03:46,353 ‫out of the weather. 65 00:03:48,270 --> 00:03:50,970 ‫So let's de-structure the props, which again 66 00:03:50,970 --> 00:03:55,950 ‫we have to do it manually inside of each method here. 67 00:03:55,950 --> 00:03:57,690 ‫So we cannot do that centrally 68 00:03:57,690 --> 00:03:59,853 ‫like we do in function components. 69 00:04:00,870 --> 00:04:03,630 ‫So props.weather. 70 00:04:03,630 --> 00:04:06,933 ‫And so now let's take out all these things there. 71 00:04:09,420 --> 00:04:11,320 ‫So temperature_2m_max 72 00:04:16,230 --> 00:04:18,150 ‫and let's also rename these. 73 00:04:18,150 --> 00:04:21,333 ‫So this is basically just the maximum temperature. 74 00:04:23,370 --> 00:04:25,773 ‫Okay, let's copy that. 75 00:04:29,010 --> 00:04:34,010 ‫We also have the min, which we will just call min. 76 00:04:34,170 --> 00:04:35,820 ‫And here we are getting this error 77 00:04:35,820 --> 00:04:40,473 ‫because of course this is this.props, not just props. 78 00:04:42,900 --> 00:04:47,280 ‫Let's take also the time and let's call this dates. 79 00:04:47,280 --> 00:04:51,600 ‫And then let's also take the weather code. 80 00:04:51,600 --> 00:04:54,660 ‫And this one I will call codes. 81 00:04:54,660 --> 00:04:58,740 ‫So codes because it is multiple codes, not just one. 82 00:04:58,740 --> 00:05:01,830 ‫So these here are basically for arrays. 83 00:05:01,830 --> 00:05:04,350 ‫And so in order to render those 84 00:05:04,350 --> 00:05:07,080 ‫we need to of course loop over the arrays 85 00:05:07,080 --> 00:05:08,280 ‫and then for each of them 86 00:05:08,280 --> 00:05:11,223 ‫render one of these components right there. 87 00:05:12,150 --> 00:05:14,343 ‫So that's going to be another component. 88 00:05:15,660 --> 00:05:18,030 ‫Now okay, and before we do that 89 00:05:18,030 --> 00:05:23,030 ‫let's also quickly include the location here in this h2. 90 00:05:25,200 --> 00:05:28,110 ‫And then let's finally do what I just said, 91 00:05:28,110 --> 00:05:30,453 ‫which is to loop over these arrays. 92 00:05:31,530 --> 00:05:36,530 ‫So let's create this list here with the prop name 93 00:05:37,020 --> 00:05:39,720 ‫or with the class name actually of weather. 94 00:05:39,720 --> 00:05:41,010 ‫And then we will just loop 95 00:05:41,010 --> 00:05:44,130 ‫over one of these arrays as always. 96 00:05:44,130 --> 00:05:48,000 ‫So in this case, since all of these four are actually arrays 97 00:05:48,000 --> 00:05:49,800 ‫and we will need to paste the data 98 00:05:49,800 --> 00:05:52,740 ‫for each of them into the new component 99 00:05:52,740 --> 00:05:55,710 ‫it doesn't really matter over which one we loop. 100 00:05:55,710 --> 00:05:57,363 ‫So let's just choose the dates. 101 00:06:03,390 --> 00:06:06,780 ‫And then here we will create a day component. 102 00:06:06,780 --> 00:06:09,420 ‫And for now, I will not paste anything in. 103 00:06:09,420 --> 00:06:13,980 ‫And so instead I will just create that component here first. 104 00:06:13,980 --> 00:06:18,893 ‫So class day extends React.Component 105 00:06:23,460 --> 00:06:25,053 ‫and then our render method. 106 00:06:26,430 --> 00:06:30,540 ‫And then in there return one list item, 107 00:06:30,540 --> 00:06:33,033 ‫which will now just says day. 108 00:06:33,990 --> 00:06:35,523 ‫And so let's check that. 109 00:06:37,020 --> 00:06:39,760 ‫Okay, let's get rid of that highlighting 110 00:06:41,460 --> 00:06:42,843 ‫and let's wait for it. 111 00:06:45,120 --> 00:06:46,650 ‫And there we go. 112 00:06:46,650 --> 00:06:50,820 ‫So we have one day component for each of the days. 113 00:06:50,820 --> 00:06:54,210 ‫And so now let's paste in all the data that we need. 114 00:06:54,210 --> 00:06:57,690 ‫So basically we need the current maximum temperature, 115 00:06:57,690 --> 00:06:59,580 ‫the minimum, the date 116 00:06:59,580 --> 00:07:02,793 ‫and the weather code for each particular day. 117 00:07:05,340 --> 00:07:07,800 ‫So let's start with the date, 118 00:07:07,800 --> 00:07:12,120 ‫which is just the current date, then the max temperature. 119 00:07:12,120 --> 00:07:15,750 ‫And so now let's come to the max array 120 00:07:15,750 --> 00:07:19,500 ‫and then take the element at the current position 121 00:07:19,500 --> 00:07:22,860 ‫that we are looping over this data rate. 122 00:07:22,860 --> 00:07:26,070 ‫So here we also need to receive the current index. 123 00:07:26,070 --> 00:07:29,070 ‫And so then use that index here. 124 00:07:29,070 --> 00:07:32,020 ‫Now, the same thing with the minimum temperature 125 00:07:34,050 --> 00:07:38,040 ‫so min at I as well. 126 00:07:38,040 --> 00:07:42,840 ‫And finally also for the code, so codes.at I. 127 00:07:45,690 --> 00:07:50,040 ‫And finally, React also needs the key as always. 128 00:07:50,040 --> 00:07:52,740 ‫And so here we can actually use the date itself 129 00:07:52,740 --> 00:07:55,053 ‫which is going to be a unique string. 130 00:07:56,130 --> 00:07:58,410 ‫So if we reload that now, 131 00:07:58,410 --> 00:08:00,480 ‫well, actually there's no need to test this, 132 00:08:00,480 --> 00:08:03,993 ‫because we're not yet doing anything with that data here, 133 00:08:05,130 --> 00:08:06,630 ‫but so let's now do that. 134 00:08:06,630 --> 00:08:10,023 ‫And let's again start by destructuring our props. 135 00:08:11,820 --> 00:08:16,820 ‫So date max min code is equals to this.props. 136 00:08:21,510 --> 00:08:24,720 ‫And now it's time to actually use that data 137 00:08:24,720 --> 00:08:26,403 ‫to render the weather. 138 00:08:27,420 --> 00:08:31,380 ‫So let's create a paragraph here first with a date. 139 00:08:31,380 --> 00:08:35,940 ‫And then here the minimum and the maximum temperatures. 140 00:08:35,940 --> 00:08:38,763 ‫So let's use the HTML entity for degrees, 141 00:08:40,380 --> 00:08:44,910 ‫then a dash, so another HTML entity 142 00:08:44,910 --> 00:08:47,253 ‫and then the max temperature. 143 00:08:51,360 --> 00:08:54,480 ‫Okay, so that's not the final version, 144 00:08:54,480 --> 00:08:57,243 ‫but it should already show us something. 145 00:08:59,070 --> 00:09:00,240 ‫Nice. 146 00:09:00,240 --> 00:09:02,850 ‫So that's already the current weather, 147 00:09:02,850 --> 00:09:06,090 ‫even though that's not really easy to understand yet. 148 00:09:06,090 --> 00:09:07,890 ‫So it needs some formatting. 149 00:09:07,890 --> 00:09:09,120 ‫For example here 150 00:09:09,120 --> 00:09:12,303 ‫this one should actually get the day class. 151 00:09:13,770 --> 00:09:16,620 ‫And also we want the weather code now. 152 00:09:16,620 --> 00:09:18,990 ‫And for that we will create a spin 153 00:09:18,990 --> 00:09:21,783 ‫and you will see why that is in a minute. 154 00:09:23,100 --> 00:09:24,930 ‫So let's just try this again 155 00:09:24,930 --> 00:09:27,723 ‫so we can see what changes we need to do next. 156 00:09:31,260 --> 00:09:33,540 ‫And so here we are. 157 00:09:33,540 --> 00:09:35,130 ‫So this is our temperature here, 158 00:09:35,130 --> 00:09:37,800 ‫which we should probably around select this. 159 00:09:37,800 --> 00:09:39,240 ‫It's a bit confusing. 160 00:09:39,240 --> 00:09:41,790 ‫Then we want to format these dates 161 00:09:41,790 --> 00:09:42,930 ‫and we want to transform 162 00:09:42,930 --> 00:09:45,060 ‫these strange looking weather codes here 163 00:09:45,060 --> 00:09:46,800 ‫into something meaningful. 164 00:09:46,800 --> 00:09:49,590 ‫And so that's where we have all those functions for 165 00:09:49,590 --> 00:09:51,290 ‫that we included in the beginning. 166 00:09:52,440 --> 00:09:55,620 ‫But first, let's round these values here. 167 00:09:55,620 --> 00:10:00,090 ‫So let's round this one down with math.floor. 168 00:10:00,090 --> 00:10:04,410 ‫In this one we can round it up with math.ceil, 169 00:10:06,450 --> 00:10:08,910 ‫but let's not save this yet. 170 00:10:08,910 --> 00:10:11,793 ‫And so let's continue now with the code and the date. 171 00:10:12,840 --> 00:10:16,620 ‫So for that we have the get weather icon function, 172 00:10:16,620 --> 00:10:19,920 ‫which just takes in the code, so a code like this. 173 00:10:19,920 --> 00:10:23,040 ‫It will then return the corresponding emoji. 174 00:10:23,040 --> 00:10:26,160 ‫And we have the format day function. 175 00:10:26,160 --> 00:10:28,263 ‫So let's now use both of them. 176 00:10:29,460 --> 00:10:34,460 ‫So here we use format day and here we use get weather icon. 177 00:10:42,330 --> 00:10:44,970 ‫All right, so let's try again. 178 00:10:44,970 --> 00:10:46,950 ‫And it always takes some time, 179 00:10:46,950 --> 00:10:50,400 ‫but this time it was actually fast. 180 00:10:50,400 --> 00:10:53,220 ‫So, that's looking nice already. 181 00:10:53,220 --> 00:10:56,400 ‫Let's just make the second one here bold, 182 00:10:56,400 --> 00:10:59,913 ‫which I think I have in the demo. 183 00:11:01,500 --> 00:11:06,000 ‫And then closing it of course, right after here. 184 00:11:06,000 --> 00:11:09,510 ‫And then what I also have in the original demo application 185 00:11:09,510 --> 00:11:12,780 ‫is that for the first weather here, that is basically 186 00:11:12,780 --> 00:11:16,890 ‫today I want to display actually today here. 187 00:11:16,890 --> 00:11:19,020 ‫And so now we need to paste in 188 00:11:19,020 --> 00:11:21,630 ‫another prop here into the day component, 189 00:11:21,630 --> 00:11:24,300 ‫which tells us whether this is 190 00:11:24,300 --> 00:11:26,403 ‫actually the current day or not. 191 00:11:27,420 --> 00:11:31,170 ‫So let's say is today. 192 00:11:31,170 --> 00:11:33,120 ‫And then if it is today 193 00:11:33,120 --> 00:11:37,200 ‫it simply means that the index is equal to zero. 194 00:11:37,200 --> 00:11:40,440 ‫So basically that it's the very first day component 195 00:11:40,440 --> 00:11:41,540 ‫that will be rendered. 196 00:11:42,900 --> 00:11:47,670 ‫And so then here we can say is today. 197 00:11:47,670 --> 00:11:52,110 ‫And of course then first we need to also de-structure that. 198 00:11:52,110 --> 00:11:55,530 ‫So if it is today 199 00:11:55,530 --> 00:11:59,340 ‫then here the output should just be today 200 00:11:59,340 --> 00:12:04,340 ‫and otherwise format the date and this should be it. 201 00:12:06,000 --> 00:12:07,489 ‫So let's see. 202 00:12:07,489 --> 00:12:09,150 ‫And there it is. 203 00:12:09,150 --> 00:12:11,793 ‫Let's do London now. 204 00:12:13,830 --> 00:12:17,070 ‫And there of course, it rains a lot more. 205 00:12:17,070 --> 00:12:20,220 ‫And so we have the exact same weather as we have here 206 00:12:20,220 --> 00:12:22,833 ‫and our app now looks exactly the same. 207 00:12:23,790 --> 00:12:24,623 ‫Great. 208 00:12:25,770 --> 00:12:29,520 ‫So, we did a lot of things here in this lecture. 209 00:12:29,520 --> 00:12:31,140 ‫Let's just quickly recap, 210 00:12:31,140 --> 00:12:34,650 ‫even though it wasn't really complicated stuff. 211 00:12:34,650 --> 00:12:36,870 ‫So we just created this weather component 212 00:12:36,870 --> 00:12:38,880 ‫and included it here in case 213 00:12:38,880 --> 00:12:41,490 ‫that there is some weather data. 214 00:12:41,490 --> 00:12:42,750 ‫So basically in case that 215 00:12:42,750 --> 00:12:45,960 ‫this property here exists on the weather, 216 00:12:45,960 --> 00:12:48,810 ‫so we paste in weather and location 217 00:12:48,810 --> 00:12:50,640 ‫and then here we de-structure 218 00:12:50,640 --> 00:12:53,280 ‫at least the weather right inside the render method. 219 00:12:53,280 --> 00:12:54,930 ‫And if we had more methods 220 00:12:54,930 --> 00:12:57,450 ‫that also needed access to these props 221 00:12:57,450 --> 00:13:00,693 ‫then we would have to de-structure them again in there. 222 00:13:01,590 --> 00:13:04,500 ‫Now, also notice that this component here 223 00:13:04,500 --> 00:13:06,930 ‫and also the day component, 224 00:13:06,930 --> 00:13:10,650 ‫they both don't have de-constructor method, right? 225 00:13:10,650 --> 00:13:12,570 ‫And so the reason for that is that 226 00:13:12,570 --> 00:13:15,090 ‫when we don't need to initialize state 227 00:13:15,090 --> 00:13:18,510 ‫and we don't need to explicitly bind to these keywords 228 00:13:18,510 --> 00:13:20,640 ‫to some event handler methods 229 00:13:20,640 --> 00:13:22,950 ‫then we actually don't even need 230 00:13:22,950 --> 00:13:27,570 ‫to implement the constructor in the component in question. 231 00:13:27,570 --> 00:13:30,900 ‫And so that's why these two actually don't have it. 232 00:13:30,900 --> 00:13:34,140 ‫But anyway, here then we do pretty standard stuff. 233 00:13:34,140 --> 00:13:36,900 ‫So we just loop over the dates array 234 00:13:36,900 --> 00:13:39,270 ‫so that we can render one day component 235 00:13:39,270 --> 00:13:41,130 ‫for each of the dates. 236 00:13:41,130 --> 00:13:43,770 ‫And so then we paste in the relevant date, 237 00:13:43,770 --> 00:13:46,350 ‫max and min temperatures, weather code 238 00:13:46,350 --> 00:13:48,570 ‫and letting it know 239 00:13:48,570 --> 00:13:51,660 ‫whether the current component is today or not. 240 00:13:51,660 --> 00:13:54,810 ‫And then here we simply display all that. 241 00:13:54,810 --> 00:13:57,390 ‫So these two here are basically just 242 00:13:57,390 --> 00:13:59,010 ‫presentational components. 243 00:13:59,010 --> 00:14:00,750 ‫They don't own any state 244 00:14:00,750 --> 00:14:03,750 ‫and they just display our weather data, 245 00:14:03,750 --> 00:14:07,233 ‫which was exactly the goal that we had for this lecture.