In the last couple of videos we've been learning about some new topics in the world of re-act including
classes States and lifecycle methods.
And in that process we've learned a lot but we've also gotten away from really moving our application
forward and developing it out.
So in this section I want to get start to get back on track.
Remember that we have already created a component called season display.
So in this video I want to import this season display into the index G-S file and then down inside the
render method rather than printing out the latitude right there.
I want to show the season display instead.
Remember the goal here is not to show the user their latitude.
The goal is to show the current season either summer or winter.
So to get started at the very top the index dot file.
I'm going to import season display from Season display like So remember we already created that component
and it's inside the same directory.
Which is why we use the dot slash right there.
So now down inside of my render method I'm going to find where we are currently printing out the lead
today.
I'm going to remove that.
I'm going to instead create an instance of the season display component and when we create this thing
we need to tell the seasoned display what the latitude of our user is.
And then it will be up to the season display to figure out whether or not it is summer or winter and
adjust its styling appropriately.
So we have to take our latitude which remember it's stored inside of our state object and somehow get
that property get that value of state down into the seasoned display component to do so we're going
to use the same props system that we've already taken a look at in one of the earlier applications we
put together.
So I'm going to add on a new prop with a name of simply Latt again short for latitude and then I will
assign it a value of this dot state DOT lat.
So we are taking a property from the states on the app component and passing it as a prop down into
the season display.
And this is where the two systems of props and state start to get just a little bit confusing.
So to make sure that things are really clear right.
Yes we can take state from one component and pass it as a prop down to the child in this case the seasoned
display.
So now the seasoned display is going to be very closely linked with the app component.
Any time that we call set state and cited the parent component of app and update the lead dude the app
component is going to render itself.
Remember any time we call set state the component updates itself that's going to cause the season display
to be updated as well.
Because if that latitude property right there changes the new latitude value is going to be put into
season display and season display will be really rendered as well.
So at this point I've been saying many times that any time we call said state that component renders
itself.
But in addition the component will also read render any children that it is showing as well.
We'll see some good examples of this over time.
Now let's flip on over to our seasoned display component.
So here's the season display file remember any time that we pass a prop into a functional component
it's going to show up inside of an object that is the first argument to that functional component and
we always refer to it as props.
So inside of that object there should be a last property that contains our users latitude just to make
sure that it is there.
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
browser and just make sure that the latitude is correctly showing up inside the season display.
So once I flip back over here I can very easily see Yup I got the console log there.
That means that these seasoned display is being told what the current latitude is.
So now that we've got that latitude we're going to start to write some code inside of this component
to make sure that we can determine whether or not it is summer or winter.
Also depending upon the month which we have to figure out here as well.
So let's take a quick pause right here.
When we come back the next section will start to write out some code to determine the current month
and then use the latitude in the current month to decide whether or not it is summer or winter.
So quick Pozzo I'll see you in just a minute.