‫Next up,
‫let's actually render the received weather data.
‫And for that let's create a brand new component.
‫And I will actually do that again here in the same file.
‫So let's call this one here weather.
‫And so it again extends React.Component
‫and as usually we start out with the render method
‫which again is called each time
‫that the component is rendered.
‫And then from here, let's just return a div.
‫And then for now, let's just write an h2 Weather.
‫All right.
‫And so now of course we need to include
‫this component here in our JSX.
‫So let's do that and let's do so conditionally.
‫So only when there actually is some weather data
‫then we want to display the weather component.
‫So let's say this.state.weather.
‫But this is not enough actually,
‫because by default this is also an object, right?
‫And so we actually need to read some property from this
‫so to see if it exists.
‫So let's for now comment this out
‫and run our code again so that.
‫Ah, no, we are not logging it through console anymore
‫but we can still take a look at it here in our dev tools.
‫So let's then say here
‫if this.state.weather.weathercode exists
‫so this array here,
‫this can only exist if the weather does exist.
‫And so if that's the case
‫then let's render the weather component.
‫And as a prop let's actually paste in the weather
‫that we want to render.
‫And then also the location.
‫And here of course it's not weather,
‫this is how we would do it in normal functional components.
‫But here we need to do this.state.weather.
‫So of course I'm actually no longer used
‫to writing code like this,
‫so this is a bit of a change for me as well.
‫So we're pasting in weather and location
‫and so then we can receive this year as props,
‫but more about that later.
‫For now, let's see if our component actually
‫gets rendered as soon as the data arrives.
‫And yeah, so in our componentry
‫now we also have the weather.
‫Now, okay.
‫And so now let's take those props.
‫And in class components there's actually no easy way
‫of destructuring all the received props.
‫So we can only do that in each method separately.
‫But first of all, let's actually see how we receive props
‫in a component like this.
‫And so let's log to the console this.props
‫and so if we click here now
‫then we should get, yeah, here it is.
‫So here is the props object which contains the weather
‫and the location.
‫And actually here we want the display location.
‫Just like this.
‫And now let's actually take all this data here
‫out of the weather.
‫So let's de-structure the props, which again
‫we have to do it manually inside of each method here.
‫So we cannot do that centrally
‫like we do in function components.
‫So props.weather.
‫And so now let's take out all these things there.
‫So temperature_2m_max
‫and let's also rename these.
‫So this is basically just the maximum temperature.
‫Okay, let's copy that.
‫We also have the min, which we will just call min.
‫And here we are getting this error
‫because of course this is this.props, not just props.
‫Let's take also the time and let's call this dates.
‫And then let's also take the weather code.
‫And this one I will call codes.
‫So codes because it is multiple codes, not just one.
‫So these here are basically for arrays.
‫And so in order to render those
‫we need to of course loop over the arrays
‫and then for each of them
‫render one of these components right there.
‫So that's going to be another component.
‫Now okay, and before we do that
‫let's also quickly include the location here in this h2.
‫And then let's finally do what I just said,
‫which is to loop over these arrays.
‫So let's create this list here with the prop name
‫or with the class name actually of weather.
‫And then we will just loop
‫over one of these arrays as always.
‫So in this case, since all of these four are actually arrays
‫and we will need to paste the data
‫for each of them into the new component
‫it doesn't really matter over which one we loop.
‫So let's just choose the dates.
‫And then here we will create a day component.
‫And for now, I will not paste anything in.
‫And so instead I will just create that component here first.
‫So class day extends React.Component
‫and then our render method.
‫And then in there return one list item,
‫which will now just says day.
‫And so let's check that.
‫Okay, let's get rid of that highlighting
‫and let's wait for it.
‫And there we go.
‫So we have one day component for each of the days.
‫And so now let's paste in all the data that we need.
‫So basically we need the current maximum temperature,
‫the minimum, the date
‫and the weather code for each particular day.
‫So let's start with the date,
‫which is just the current date, then the max temperature.
‫And so now let's come to the max array
‫and then take the element at the current position
‫that we are looping over this data rate.
‫So here we also need to receive the current index.
‫And so then use that index here.
‫Now, the same thing with the minimum temperature
‫so min at I as well.
‫And finally also for the code, so codes.at I.
‫And finally, React also needs the key as always.
‫And so here we can actually use the date itself
‫which is going to be a unique string.
‫So if we reload that now,
‫well, actually there's no need to test this,
‫because we're not yet doing anything with that data here,
‫but so let's now do that.
‫And let's again start by destructuring our props.
‫So date max min code is equals to this.props.
‫And now it's time to actually use that data
‫to render the weather.
‫So let's create a paragraph here first with a date.
‫And then here the minimum and the maximum temperatures.
‫So let's use the HTML entity for degrees,
‫then a dash, so another HTML entity
‫and then the max temperature.
‫Okay, so that's not the final version,
‫but it should already show us something.
‫Nice.
‫So that's already the current weather,
‫even though that's not really easy to understand yet.
‫So it needs some formatting.
‫For example here
‫this one should actually get the day class.
‫And also we want the weather code now.
‫And for that we will create a spin
‫and you will see why that is in a minute.
‫So let's just try this again
‫so we can see what changes we need to do next.
‫And so here we are.
‫So this is our temperature here,
‫which we should probably around select this.
‫It's a bit confusing.
‫Then we want to format these dates
‫and we want to transform
‫these strange looking weather codes here
‫into something meaningful.
‫And so that's where we have all those functions for
‫that we included in the beginning.
‫But first, let's round these values here.
‫So let's round this one down with math.floor.
‫In this one we can round it up with math.ceil,
‫but let's not save this yet.
‫And so let's continue now with the code and the date.
‫So for that we have the get weather icon function,
‫which just takes in the code, so a code like this.
‫It will then return the corresponding emoji.
‫And we have the format day function.
‫So let's now use both of them.
‫So here we use format day and here we use get weather icon.
‫All right, so let's try again.
‫And it always takes some time,
‫but this time it was actually fast.
‫So, that's looking nice already.
‫Let's just make the second one here bold,
‫which I think I have in the demo.
‫And then closing it of course, right after here.
‫And then what I also have in the original demo application
‫is that for the first weather here, that is basically
‫today I want to display actually today here.
‫And so now we need to paste in
‫another prop here into the day component,
‫which tells us whether this is
‫actually the current day or not.
‫So let's say is today.
‫And then if it is today
‫it simply means that the index is equal to zero.
‫So basically that it's the very first day component
‫that will be rendered.
‫And so then here we can say is today.
‫And of course then first we need to also de-structure that.
‫So if it is today
‫then here the output should just be today
‫and otherwise format the date and this should be it.
‫So let's see.
‫And there it is.
‫Let's do London now.
‫And there of course, it rains a lot more.
‫And so we have the exact same weather as we have here
‫and our app now looks exactly the same.
‫Great.
‫So, we did a lot of things here in this lecture.
‫Let's just quickly recap,
‫even though it wasn't really complicated stuff.
‫So we just created this weather component
‫and included it here in case
‫that there is some weather data.
‫So basically in case that
‫this property here exists on the weather,
‫so we paste in weather and location
‫and then here we de-structure
‫at least the weather right inside the render method.
‫And if we had more methods
‫that also needed access to these props
‫then we would have to de-structure them again in there.
‫Now, also notice that this component here
‫and also the day component,
‫they both don't have de-constructor method, right?
‫And so the reason for that is that
‫when we don't need to initialize state
‫and we don't need to explicitly bind to these keywords
‫to some event handler methods
‫then we actually don't even need
‫to implement the constructor in the component in question.
‫And so that's why these two actually don't have it.
‫But anyway, here then we do pretty standard stuff.
‫So we just loop over the dates array
‫so that we can render one day component
‫for each of the dates.
‫And so then we paste in the relevant date,
‫max and min temperatures, weather code
‫and letting it know
‫whether the current component is today or not.
‫And then here we simply display all that.
‫So these two here are basically just
‫presentational components.
‫They don't own any state
‫and they just display our weather data,
‫which was exactly the goal that we had for this lecture.