OK, so now that we have grabbed the data and we have like put it into an object and everything we have
done, we basically we have the data now, but now we want to displayed on the EUA.
So we already know that the UI part is being handled by the weather details component.
So the data had to be passed through the weather details component and then only it will be displayed
on the up to four that we need to pass the data here because you already know that all of the data is
being displayed here, the icons and everything, so that needs to be parsed here.
So what we'll do is.
We'll pass that later to this further details component, so there are many ways to do it, like passing
data within components of the very, very important thing, and there are many ways to do it.
We can use the context API to use context talk and we can use that.
We can use props and there are many, many ways.
So we'll be using props because the basic fundamental and that everyone needs to know if you're using
React use context is also a very good thing, but that is that we learn later someday.
So today we're going to ask the props and the 2:12, whether Riddle's component.
OK, so for passing the props, we need to pass that up.
We need to pass this.
We need to build this amp in full right.
AMP in full is the is the thing which is holding all our data.
So and bin full will be parsed here inside this, so we provide a basis.
Let me just provide a comment here so that could tell us that this is.
Letter to INS page.
This is a comment, OK?
All right, all right.
Who inside hell will pass the camp in full?
So, you know, damp and fall is the thing, which is a disappointment, which is responsible for storing
all of this.
This is the temple.
And this is the object.
This is storing all of this because here we have paused time before and we've since paused all of this.
All right.
So ten point four will be passed as props to this component, with the other retail components temporarily
paused as a prop.
So we can right like this also, but in four is equal to ten point four.
Like this, we can we can just pass something like this.
But here we are, just using the spread, open it.
I want to explain you how to use the spirit operator like this.
We can like this.
We can.
We can just break it like this, so need another contributor, so this is now parsed as a props like
the temp info object is parsed here and all we can make use of it inside the villages where the details
are a component.
But now I'm going to teach you on one more thing that is a spread of potato.
So what spread operator does is it spreads the value which is present inside an object.
So like, for example, stamp info is an object inside, and there are so many values.
So if you provide a spread operator to the leg, to that object, to all of the values as it is will
be received.
So for that, you will use three dogs.
Oh, for two stacked.
Three dogs and then and.
In full.
All right.
And this will be inside.
Curly braces, because this is now a script.
Yes.
All right.
Now this is part of the plot and now we'll see the magic once we go to the weather details page.
All right.
Now here what we need to what we need to do.
Grab that data.
What is the thing which we need to do to grab that data?
And inside our weather info page two, we need to see that props that we have passed to, whatever the
what the profit pass that we have to put it here inside this.
And.
So her will write the name of all of this.
Basically, this and the humidity and this you can just copy, I just copied the same time.
You can Typekit if you want some practice of something like that.
So I'll just.
Now this is part of props here.
Now we want this data.
So it's returning here inside the return.
We will.
Okay, Don.
And what we'll do is we'll find available that is gone and whether state.
So what is the weather state so that we want to define here now?
I'll tell you why we are doing this and what is the use of that, the food and.
While that.
What happened to my typing skills to me?
But that.
All right, so this is used to use.
And inside this.
Now I need to import this used to it, otherwise it will throw me an error that says use on this is
important.
Next, what we do is we want to just not check if this is showing or not.
So for example, in the temperature here, it was already hardcoded.
Now we'll write.
Tell which we are grabbing from the.
Apron for him, so he had a meal, right?
And so let me, first of all, start of the server.
I can go to that directory.
That is, and I'll write him and write and start, let it start.
It will be starting.
No problem with that.
Till then, we can just configure it.
OK, his head after one term and this is the weather condition.
So what do we provide inside the weather condition?
That is the weather type, and we will provide the time.
Right.
When the tape next, this is the name.
The name of the city.
Is Mumbai, it will take the knee.
And that is the name of the city, and this is the country will provide a comma and then we'll make
a country.
It's not come by then.
And we have other things also here, we have the time.
So that is the sunset.
Who had a real right?
So basically, PM will be there because uncertain happens and PM only, so will right sunset.
Next, we have the gay Assad starting next year, the humidity for that will ride this.
You mean to right next to what we have, we have.
But I sure as hell will provide the values for pressure.
There should.
And we have a speed, oh my God, there are so many things just seem so many things we are grabbing
from the CPA and now let me just save this and let us just go to the.
Browser, if we have any.
Anything, anything?
First, is it.
And BBC interests.
Allows me to see what are those destroying objects are not related to the I found object with keys.
If you meant to render a collection of turn use administered.
Sometimes refreshing is a good option, but you have this.
OK, so let me just go ahead and local where this coming from.
Who?
Maybe we have done some mistake in the world that we will.
Okay, OK, here's a mistake.
So this we have just paused as variables.
No, this is an object.
So it will be in the college business.
Oh, let me just hurt, Steve, and let's go back to the browser.
OK, now we are seeing some of the things.
Let me just refresh.
And let me just search for my.
There are a few things, but they are not properly configured so that as temperatures soared, this
is probably in Fahrenheit.
This is not one degrees Celsius, so we need to convert it to degrees Celsius.
Next, we have cloudy.
No your case.
We have the cloud icon.
This is the name of the city.
Maybe we can try to end.
So, OK, in Bailey, it's his.
So what are the things which are not correct here?
If you can just notice, what are the things, first of all, the icon is not changing.
And secondly, the temperature is in Fahrenheit nine or 10 degrees Celsius so that we need to change
next.
That sunset time is in gibberish.
I don't know what it is.
Maybe it's in milliseconds or something like that.
Humidity is perfect, pressure is perfect, and the speed is also perfect.
So let's go back to the cold and let us change few of the things.
So here, first of all, let me convert that.
Let me convert the data, let me convert the temperature to two degrees Celsius.
So for that, we need to provide this unit is equal to my brick.
After.
After the side, when we need to provide and newness so strong, we need to provide.
And.
Units is required to make.
You save and go back to the browser if it's changed.
Yeah, now it's thirty one point five degrees Celsius, OK, like it's Jean 2°C from Fahrenheit.
OK, one problem resolved.
Next, we go to the sunset time, so we have to configure this and we have to provide a proper time,
not the stupidest time.
So when we go back to the code, so what we'll do is we'll create.
We'll create.
It will create one variable, so that will store all of that.
So that will be taking.
No, not here.
Why are you doing it here?
Okay, I don't know why.
I we did this.
You want to do it here.
Oh, okay.
And what we want to do is we want to create will write a comment.
So that is converting.
The.
That in time after that, we'll take that leg back.
The second is equal to sunset, so this will grab the value for sunset.
OK.
Next, we will create another.
It will take both duties, all also that so that we provide this new and.
It will multiply the second variable with thousand, so it gets converted in into milliseconds ones
millisecond.
Then it's quite easy for us to like is let us create a final variable, which will store all of that.
So that will be same time as the off.
So this will will create template literals here then and inside this field, not get ours.
So this will provide us the hours.
For example, four o'clock or something like that.
And then we need to close it and we provide a colon.
Then we will take up the minutes.
So for that, we need to provide the dog.
Minutes then closed off and let me just not save it.
No, and no, I won't do this time.
Students do off on set or ahead either, right?
Simon Steward and see it.
OK, now when I go back to the browser and when I see, okay, we see a perfect time with sunset and
I'm going to tell the top of it.
OK, so a second problem dissolved was what was the temperature second on?
What is the third one?
Is the changing of the icon.
Why the icon does not change according to the weather.
Of course it will not because we have not provided it any option.
This is hardcoded.
Now we're going to provide an option to create like we want to create a function to change this.
Change this icon.
OK.