1
00:00:00,910 --> 00:00:08,170
OK, so now that we have grabbed the data and we have like put it into an object and everything we have

2
00:00:08,170 --> 00:00:13,090
done, we basically we have the data now, but now we want to displayed on the EUA.

3
00:00:13,600 --> 00:00:18,790
So we already know that the UI part is being handled by the weather details component.

4
00:00:19,270 --> 00:00:25,180
So the data had to be passed through the weather details component and then only it will be displayed

5
00:00:25,180 --> 00:00:31,750
on the up to four that we need to pass the data here because you already know that all of the data is

6
00:00:31,750 --> 00:00:37,610
being displayed here, the icons and everything, so that needs to be parsed here.

7
00:00:37,630 --> 00:00:39,040
So what we'll do is.

8
00:00:40,650 --> 00:00:47,250
We'll pass that later to this further details component, so there are many ways to do it, like passing

9
00:00:47,250 --> 00:00:51,480
data within components of the very, very important thing, and there are many ways to do it.

10
00:00:51,870 --> 00:00:57,630
We can use the context API to use context talk and we can use that.

11
00:00:57,930 --> 00:01:00,600
We can use props and there are many, many ways.

12
00:01:00,610 --> 00:01:06,710
So we'll be using props because the basic fundamental and that everyone needs to know if you're using

13
00:01:06,710 --> 00:01:13,250
React use context is also a very good thing, but that is that we learn later someday.

14
00:01:13,530 --> 00:01:18,760
So today we're going to ask the props and the 2:12, whether Riddle's component.

15
00:01:18,810 --> 00:01:22,290
OK, so for passing the props, we need to pass that up.

16
00:01:23,130 --> 00:01:24,390
We need to pass this.

17
00:01:25,530 --> 00:01:28,720
We need to build this amp in full right.

18
00:01:29,160 --> 00:01:33,450
AMP in full is the is the thing which is holding all our data.

19
00:01:33,930 --> 00:01:41,570
So and bin full will be parsed here inside this, so we provide a basis.

20
00:01:41,870 --> 00:01:47,760
Let me just provide a comment here so that could tell us that this is.

21
00:01:50,540 --> 00:01:54,210
Letter to INS page.

22
00:01:54,950 --> 00:01:55,960
This is a comment, OK?

23
00:01:57,180 --> 00:01:58,340
All right, all right.

24
00:02:00,780 --> 00:02:03,330
Who inside hell will pass the camp in full?

25
00:02:03,690 --> 00:02:08,580
So, you know, damp and fall is the thing, which is a disappointment, which is responsible for storing

26
00:02:08,580 --> 00:02:09,130
all of this.

27
00:02:09,180 --> 00:02:10,020
This is the temple.

28
00:02:10,620 --> 00:02:12,120
And this is the object.

29
00:02:12,570 --> 00:02:18,360
This is storing all of this because here we have paused time before and we've since paused all of this.

30
00:02:18,600 --> 00:02:18,990
All right.

31
00:02:20,370 --> 00:02:27,990
So ten point four will be passed as props to this component, with the other retail components temporarily

32
00:02:27,990 --> 00:02:29,010
paused as a prop.

33
00:02:29,550 --> 00:02:37,170
So we can right like this also, but in four is equal to ten point four.

34
00:02:38,490 --> 00:02:41,880
Like this, we can we can just pass something like this.

35
00:02:42,450 --> 00:02:48,070
But here we are, just using the spread, open it.

36
00:02:48,390 --> 00:02:52,560
I want to explain you how to use the spirit operator like this.

37
00:02:52,560 --> 00:02:53,850
We can like this.

38
00:02:53,850 --> 00:02:54,270
We can.

39
00:02:55,560 --> 00:03:04,500
We can just break it like this, so need another contributor, so this is now parsed as a props like

40
00:03:04,500 --> 00:03:11,580
the temp info object is parsed here and all we can make use of it inside the villages where the details

41
00:03:11,580 --> 00:03:12,540
are a component.

42
00:03:12,810 --> 00:03:16,860
But now I'm going to teach you on one more thing that is a spread of potato.

43
00:03:17,190 --> 00:03:23,220
So what spread operator does is it spreads the value which is present inside an object.

44
00:03:23,700 --> 00:03:29,070
So like, for example, stamp info is an object inside, and there are so many values.

45
00:03:29,490 --> 00:03:36,750
So if you provide a spread operator to the leg, to that object, to all of the values as it is will

46
00:03:36,750 --> 00:03:37,770
be received.

47
00:03:38,070 --> 00:03:40,550
So for that, you will use three dogs.

48
00:03:41,190 --> 00:03:42,720
Oh, for two stacked.

49
00:03:43,640 --> 00:03:46,090
Three dogs and then and.

50
00:03:47,490 --> 00:03:48,120
In full.

51
00:03:48,600 --> 00:03:49,410
All right.

52
00:03:49,950 --> 00:03:51,450
And this will be inside.

53
00:03:52,720 --> 00:03:55,960
Curly braces, because this is now a script.

54
00:03:56,170 --> 00:03:56,500
Yes.

55
00:03:57,520 --> 00:03:58,090
All right.

56
00:03:58,360 --> 00:04:04,120
Now this is part of the plot and now we'll see the magic once we go to the weather details page.

57
00:04:04,150 --> 00:04:04,660
All right.

58
00:04:05,560 --> 00:04:09,190
Now here what we need to what we need to do.

59
00:04:09,700 --> 00:04:10,780
Grab that data.

60
00:04:11,020 --> 00:04:14,210
What is the thing which we need to do to grab that data?

61
00:04:14,230 --> 00:04:23,740
And inside our weather info page two, we need to see that props that we have passed to, whatever the

62
00:04:24,460 --> 00:04:28,300
what the profit pass that we have to put it here inside this.

63
00:04:29,700 --> 00:04:30,380
And.

64
00:04:33,880 --> 00:04:36,340
So her will write the name of all of this.

65
00:04:37,540 --> 00:04:43,180
Basically, this and the humidity and this you can just copy, I just copied the same time.

66
00:04:43,900 --> 00:04:47,080
You can Typekit if you want some practice of something like that.

67
00:04:47,080 --> 00:04:47,710
So I'll just.

68
00:04:49,240 --> 00:04:51,250
Now this is part of props here.

69
00:04:51,760 --> 00:04:53,410
Now we want this data.

70
00:04:53,620 --> 00:04:58,100
So it's returning here inside the return.

71
00:04:58,120 --> 00:04:59,050
We will.

72
00:05:00,490 --> 00:05:01,240
Okay, Don.

73
00:05:03,060 --> 00:05:11,130
And what we'll do is we'll find available that is gone and whether state.

74
00:05:12,120 --> 00:05:17,370
So what is the weather state so that we want to define here now?

75
00:05:17,400 --> 00:05:25,140
I'll tell you why we are doing this and what is the use of that, the food and.

76
00:05:28,640 --> 00:05:30,640
While that.

77
00:05:32,000 --> 00:05:33,740
What happened to my typing skills to me?

78
00:05:35,430 --> 00:05:36,240
But that.

79
00:05:40,030 --> 00:05:43,090
All right, so this is used to use.

80
00:05:45,420 --> 00:05:46,470
And inside this.

81
00:05:49,170 --> 00:05:57,060
Now I need to import this used to it, otherwise it will throw me an error that says use on this is

82
00:05:57,060 --> 00:05:57,570
important.

83
00:05:58,350 --> 00:06:04,110
Next, what we do is we want to just not check if this is showing or not.

84
00:06:04,680 --> 00:06:08,850
So for example, in the temperature here, it was already hardcoded.

85
00:06:09,330 --> 00:06:10,350
Now we'll write.

86
00:06:12,620 --> 00:06:14,750
Tell which we are grabbing from the.

87
00:06:16,290 --> 00:06:18,270
Apron for him, so he had a meal, right?

88
00:06:19,350 --> 00:06:22,440
And so let me, first of all, start of the server.

89
00:06:26,570 --> 00:06:28,310
I can go to that directory.

90
00:06:29,270 --> 00:06:35,750
That is, and I'll write him and write and start, let it start.

91
00:06:35,810 --> 00:06:36,650
It will be starting.

92
00:06:36,650 --> 00:06:37,520
No problem with that.

93
00:06:38,010 --> 00:06:39,590
Till then, we can just configure it.

94
00:06:40,100 --> 00:06:43,280
OK, his head after one term and this is the weather condition.

95
00:06:43,910 --> 00:06:47,180
So what do we provide inside the weather condition?

96
00:06:47,810 --> 00:06:52,250
That is the weather type, and we will provide the time.

97
00:06:56,240 --> 00:06:56,630
Right.

98
00:07:00,770 --> 00:07:03,350
When the tape next, this is the name.

99
00:07:04,460 --> 00:07:05,720
The name of the city.

100
00:07:07,450 --> 00:07:10,560
Is Mumbai, it will take the knee.

101
00:07:12,680 --> 00:07:19,250
And that is the name of the city, and this is the country will provide a comma and then we'll make

102
00:07:19,970 --> 00:07:20,630
a country.

103
00:07:23,070 --> 00:07:24,900
It's not come by then.

104
00:07:25,950 --> 00:07:30,170
And we have other things also here, we have the time.

105
00:07:31,050 --> 00:07:32,730
So that is the sunset.

106
00:07:33,800 --> 00:07:34,820
Who had a real right?

107
00:07:36,090 --> 00:07:43,680
So basically, PM will be there because uncertain happens and PM only, so will right sunset.

108
00:07:45,180 --> 00:07:52,680
Next, we have the gay Assad starting next year, the humidity for that will ride this.

109
00:07:54,500 --> 00:07:59,240
You mean to right next to what we have, we have.

110
00:07:59,450 --> 00:08:03,500
But I sure as hell will provide the values for pressure.

111
00:08:05,550 --> 00:08:06,210
There should.

112
00:08:07,220 --> 00:08:12,950
And we have a speed, oh my God, there are so many things just seem so many things we are grabbing

113
00:08:12,950 --> 00:08:19,610
from the CPA and now let me just save this and let us just go to the.

114
00:08:21,070 --> 00:08:24,100
Browser, if we have any.

115
00:08:25,550 --> 00:08:27,280
Anything, anything?

116
00:08:29,490 --> 00:08:30,980
First, is it.

117
00:08:32,450 --> 00:08:33,730
And BBC interests.

118
00:08:37,850 --> 00:08:46,560
Allows me to see what are those destroying objects are not related to the I found object with keys.

119
00:08:46,760 --> 00:08:49,970
If you meant to render a collection of turn use administered.

120
00:08:51,030 --> 00:08:54,570
Sometimes refreshing is a good option, but you have this.

121
00:08:54,840 --> 00:08:59,610
OK, so let me just go ahead and local where this coming from.

122
00:09:00,780 --> 00:09:01,380
Who?

123
00:09:07,080 --> 00:09:11,570
Maybe we have done some mistake in the world that we will.

124
00:09:12,870 --> 00:09:15,060
Okay, OK, here's a mistake.

125
00:09:15,060 --> 00:09:17,770
So this we have just paused as variables.

126
00:09:17,790 --> 00:09:20,200
No, this is an object.

127
00:09:20,200 --> 00:09:21,860
So it will be in the college business.

128
00:09:22,800 --> 00:09:28,140
Oh, let me just hurt, Steve, and let's go back to the browser.

129
00:09:28,950 --> 00:09:31,650
OK, now we are seeing some of the things.

130
00:09:31,710 --> 00:09:32,790
Let me just refresh.

131
00:09:33,780 --> 00:09:36,000
And let me just search for my.

132
00:09:38,080 --> 00:09:44,770
There are a few things, but they are not properly configured so that as temperatures soared, this

133
00:09:44,770 --> 00:09:46,610
is probably in Fahrenheit.

134
00:09:46,630 --> 00:09:50,290
This is not one degrees Celsius, so we need to convert it to degrees Celsius.

135
00:09:51,040 --> 00:09:52,420
Next, we have cloudy.

136
00:09:52,430 --> 00:09:53,260
No your case.

137
00:09:53,260 --> 00:09:54,380
We have the cloud icon.

138
00:09:54,380 --> 00:09:55,550
This is the name of the city.

139
00:09:55,570 --> 00:09:58,020
Maybe we can try to end.

140
00:09:59,410 --> 00:10:02,290
So, OK, in Bailey, it's his.

141
00:10:02,920 --> 00:10:06,430
So what are the things which are not correct here?

142
00:10:07,770 --> 00:10:12,360
If you can just notice, what are the things, first of all, the icon is not changing.

143
00:10:12,990 --> 00:10:18,180
And secondly, the temperature is in Fahrenheit nine or 10 degrees Celsius so that we need to change

144
00:10:18,690 --> 00:10:19,130
next.

145
00:10:19,140 --> 00:10:21,720
That sunset time is in gibberish.

146
00:10:21,750 --> 00:10:22,720
I don't know what it is.

147
00:10:22,740 --> 00:10:25,890
Maybe it's in milliseconds or something like that.

148
00:10:26,340 --> 00:10:30,450
Humidity is perfect, pressure is perfect, and the speed is also perfect.

149
00:10:31,080 --> 00:10:37,200
So let's go back to the cold and let us change few of the things.

150
00:10:38,510 --> 00:10:40,920
So here, first of all, let me convert that.

151
00:10:42,320 --> 00:10:47,990
Let me convert the data, let me convert the temperature to two degrees Celsius.

152
00:10:47,990 --> 00:10:52,900
So for that, we need to provide this unit is equal to my brick.

153
00:10:54,580 --> 00:10:55,420
After.

154
00:10:56,500 --> 00:11:02,470
After the side, when we need to provide and newness so strong, we need to provide.

155
00:11:03,550 --> 00:11:04,000
And.

156
00:11:05,840 --> 00:11:08,210
Units is required to make.

157
00:11:09,950 --> 00:11:14,030
You save and go back to the browser if it's changed.

158
00:11:14,210 --> 00:11:21,510
Yeah, now it's thirty one point five degrees Celsius, OK, like it's Jean 2°C from Fahrenheit.

159
00:11:21,530 --> 00:11:24,290
OK, one problem resolved.

160
00:11:24,740 --> 00:11:31,940
Next, we go to the sunset time, so we have to configure this and we have to provide a proper time,

161
00:11:31,940 --> 00:11:33,320
not the stupidest time.

162
00:11:34,100 --> 00:11:40,160
So when we go back to the code, so what we'll do is we'll create.

163
00:11:42,130 --> 00:11:42,760
We'll create.

164
00:11:45,330 --> 00:11:49,650
It will create one variable, so that will store all of that.

165
00:11:50,570 --> 00:11:54,530
So that will be taking.

166
00:11:54,800 --> 00:11:55,730
No, not here.

167
00:11:55,760 --> 00:11:56,570
Why are you doing it here?

168
00:11:56,570 --> 00:11:58,090
Okay, I don't know why.

169
00:11:59,150 --> 00:12:00,460
I we did this.

170
00:12:01,190 --> 00:12:02,200
You want to do it here.

171
00:12:04,770 --> 00:12:06,020
Oh, okay.

172
00:12:09,020 --> 00:12:14,700
And what we want to do is we want to create will write a comment.

173
00:12:14,720 --> 00:12:17,240
So that is converting.

174
00:12:18,290 --> 00:12:18,680
The.

175
00:12:20,070 --> 00:12:26,330
That in time after that, we'll take that leg back.

176
00:12:27,180 --> 00:12:32,130
The second is equal to sunset, so this will grab the value for sunset.

177
00:12:32,250 --> 00:12:32,700
OK.

178
00:12:33,350 --> 00:12:35,880
Next, we will create another.

179
00:12:37,560 --> 00:12:45,090
It will take both duties, all also that so that we provide this new and.

180
00:12:46,250 --> 00:12:55,990
It will multiply the second variable with thousand, so it gets converted in into milliseconds ones

181
00:12:56,400 --> 00:12:57,020
millisecond.

182
00:12:57,080 --> 00:13:05,480
Then it's quite easy for us to like is let us create a final variable, which will store all of that.

183
00:13:05,660 --> 00:13:10,950
So that will be same time as the off.

184
00:13:11,870 --> 00:13:23,500
So this will will create template literals here then and inside this field, not get ours.

185
00:13:23,630 --> 00:13:25,370
So this will provide us the hours.

186
00:13:26,920 --> 00:13:29,170
For example, four o'clock or something like that.

187
00:13:29,740 --> 00:13:32,380
And then we need to close it and we provide a colon.

188
00:13:33,040 --> 00:13:36,610
Then we will take up the minutes.

189
00:13:36,970 --> 00:13:39,430
So for that, we need to provide the dog.

190
00:13:41,760 --> 00:13:47,040
Minutes then closed off and let me just not save it.

191
00:13:47,820 --> 00:13:50,250
No, and no, I won't do this time.

192
00:13:50,300 --> 00:13:54,170
Students do off on set or ahead either, right?

193
00:13:56,790 --> 00:13:58,770
Simon Steward and see it.

194
00:13:59,520 --> 00:14:08,100
OK, now when I go back to the browser and when I see, okay, we see a perfect time with sunset and

195
00:14:08,100 --> 00:14:09,250
I'm going to tell the top of it.

196
00:14:09,280 --> 00:14:13,920
OK, so a second problem dissolved was what was the temperature second on?

197
00:14:13,920 --> 00:14:14,880
What is the third one?

198
00:14:14,880 --> 00:14:18,010
Is the changing of the icon.

199
00:14:18,640 --> 00:14:21,390
Why the icon does not change according to the weather.

200
00:14:21,720 --> 00:14:24,590
Of course it will not because we have not provided it any option.

201
00:14:24,600 --> 00:14:25,500
This is hardcoded.

202
00:14:25,920 --> 00:14:32,190
Now we're going to provide an option to create like we want to create a function to change this.

203
00:14:32,940 --> 00:14:33,850
Change this icon.

204
00:14:33,870 --> 00:14:34,200
OK.