1
00:00:00,960 --> 00:00:04,590
In this video, we'll see how to implement the search bar component.

2
00:00:05,070 --> 00:00:08,310
So in the previous video, we have created the components that we request.

3
00:00:08,520 --> 00:00:13,380
And also, there will be further components that we need to create, as I said, the video item present

4
00:00:13,380 --> 00:00:13,820
in the video.

5
00:00:14,580 --> 00:00:20,130
That component and also like a component that exports all the components of the single line so that

6
00:00:20,130 --> 00:00:26,370
instead of importing each and every component for one line, we can simply light logic and set the next

7
00:00:26,370 --> 00:00:29,400
dodges, which helps us to export all the components present.

8
00:00:29,400 --> 00:00:34,860
Insert the components for export as one single line so we can simply use one single line and export

9
00:00:34,860 --> 00:00:38,950
all the components that we use in that dodges that will build in the future.

10
00:00:39,120 --> 00:00:45,180
So now in this regard, area of interest is completing this search component and then using it in our

11
00:00:45,180 --> 00:00:45,750
budgets.

12
00:00:46,350 --> 00:00:49,620
When you get started with that first, listen to this Jan. six.

13
00:00:49,830 --> 00:00:53,280
No need to import react, but we need to use a state.

14
00:00:53,610 --> 00:00:55,410
So I'll be using the U.S. took.

15
00:00:56,440 --> 00:00:58,180
So important that the U.S. took.

16
00:01:01,730 --> 00:01:06,180
They react like an ex from materially white.

17
00:01:06,380 --> 00:01:08,990
I'll be putting paper and text field.

18
00:01:10,270 --> 00:01:15,700
So this is basically to get the search bar and search bar kind of thing, OK?

19
00:01:16,610 --> 00:01:17,990
Paper and.

20
00:01:19,040 --> 00:01:19,790
Next field.

21
00:01:22,940 --> 00:01:23,430
Immediately.

22
00:01:25,190 --> 00:01:30,680
Soft additional will be creating the search bar constant that we will export and write all the code

23
00:01:30,680 --> 00:01:31,280
inside that.

24
00:01:33,690 --> 00:01:34,350
Search, but.

25
00:01:39,940 --> 00:01:41,560
So instead, this will be returning.

26
00:01:44,490 --> 00:01:46,800
Oh, a small just a paper.

27
00:01:58,150 --> 00:02:04,960
So this paper will be the elevation will be six and a in the previous video, so this is not an area

28
00:02:04,960 --> 00:02:09,580
of interest like how we react materially, why it works and what the attributes, what this elevation

29
00:02:09,580 --> 00:02:09,700
is.

30
00:02:09,700 --> 00:02:16,270
All things do, you can simply go to this documentation, check what these things do and also search

31
00:02:16,270 --> 00:02:17,890
that Google and documentation.

32
00:02:19,780 --> 00:02:25,570
This is basically the styling styling of the repair that is basically we can do with using HDMI L forms

33
00:02:25,570 --> 00:02:32,110
or alleged email forms and courses, but instead of that, we're using already some components that

34
00:02:32,110 --> 00:02:33,310
are built by other developers.

35
00:02:33,310 --> 00:02:35,140
We are using it and they're using time project.

36
00:02:35,140 --> 00:02:36,700
We're importing them and using project.

37
00:02:37,300 --> 00:02:39,700
First thing, we installed them npm install and then import them.

38
00:02:39,700 --> 00:02:40,810
And then and then we are using them.

39
00:02:41,350 --> 00:02:43,120
Those styling will be some customs duties.

40
00:02:43,450 --> 00:02:44,950
I'll give some batting order.

41
00:02:46,320 --> 00:02:48,930
Adding will be if I pick sense.

42
00:02:51,670 --> 00:02:54,460
And then after that, we'll be having our next field.

43
00:02:58,490 --> 00:02:59,960
Here inside the text field.

44
00:03:02,740 --> 00:03:05,350
Well, this will be an automatic closing back.

45
00:03:07,590 --> 00:03:09,060
Further, our props will be.

46
00:03:09,870 --> 00:03:12,060
So what do you mean by props?

47
00:03:12,420 --> 00:03:18,990
So as you can see, for example, we will have a default HD image elements such as hit one paragraph

48
00:03:19,890 --> 00:03:21,930
hedge to edge through image that like that?

49
00:03:22,440 --> 00:03:24,420
Well, we may suppose you take image back.

50
00:03:24,870 --> 00:03:26,880
Oh, if you take like if you take.

51
00:03:28,660 --> 00:03:34,070
You made sure that you love sauce and that alternative, they had basically the attributes of that tag

52
00:03:34,490 --> 00:03:34,800
here.

53
00:03:34,820 --> 00:03:39,590
This is the original that we are getting by had similar knowledge, given that it has been this is the

54
00:03:39,590 --> 00:03:40,010
default.

55
00:03:40,790 --> 00:03:44,560
But what if we want to build bags like belongings roughly made?

56
00:03:44,570 --> 00:03:50,750
We want something like I said, search box Vegemite is also not as general, basically recalling it

57
00:03:50,750 --> 00:03:51,830
as component because it is.

58
00:03:52,340 --> 00:03:54,980
The customization that we are making is that custom pack.

59
00:03:55,340 --> 00:03:57,200
So similarly, we are negating tags.

60
00:03:57,320 --> 00:04:00,710
You can also have the properties, the attributes that they have here.

61
00:04:00,710 --> 00:04:01,790
They are gone as props.

62
00:04:02,400 --> 00:04:06,470
OK, so here these are everything that we use with the props.

63
00:04:07,570 --> 00:04:09,910
And a prop for Let It Be It.

64
00:04:11,380 --> 00:04:14,020
And then Labor will be.

65
00:04:14,830 --> 00:04:18,610
So these are the props that are already present inside the actual document that we are using.

66
00:04:19,120 --> 00:04:19,370
OK.

67
00:04:19,390 --> 00:04:23,340
These are development that some developer that developed this paper texture and everything materially.

68
00:04:23,740 --> 00:04:25,960
We're simply using them for their styling purpose.

69
00:04:26,920 --> 00:04:28,350
So the label research.

70
00:04:31,600 --> 00:04:36,160
OK, so now after this is done, we will be using the state for this such.

71
00:04:37,570 --> 00:04:38,230
Constant.

72
00:04:39,870 --> 00:04:41,430
Search don't.

73
00:04:42,500 --> 00:04:44,390
Someone said search don't.

74
00:04:46,260 --> 00:04:47,760
Is it going to use state?

75
00:04:52,960 --> 00:05:00,550
So what this line is, basically we are creating two things one is search term search term is a constant.

76
00:05:00,850 --> 00:05:03,820
It's a constant and varies in constant fear to constant.

77
00:05:03,850 --> 00:05:04,930
That store some value.

78
00:05:05,290 --> 00:05:05,620
OK.

79
00:05:06,190 --> 00:05:12,040
And then what is the said search done does is this is the second parameter that means it is a function.

80
00:05:12,460 --> 00:05:16,300
It is a function that changes the value of this constant.

81
00:05:16,720 --> 00:05:17,050
OK.

82
00:05:17,590 --> 00:05:22,630
So whenever we want to change the search term value, then we'll be calling this search term function.

83
00:05:23,110 --> 00:05:25,540
Initially, the search term value will be interesting.

84
00:05:25,870 --> 00:05:30,490
So initially, when there is nothing, the value of the text field will be in a search term.

85
00:05:30,730 --> 00:05:34,270
Whenever we are changing search term, then the said search term and change that.

86
00:05:34,600 --> 00:05:40,970
And also it will like keep the value of that search term to the next week.

87
00:05:40,990 --> 00:05:42,400
So that will do it.

88
00:05:43,450 --> 00:05:45,960
So the value will be search term.

89
00:05:48,580 --> 00:05:55,660
So whenever we are changing the value in the search bar, then this gets updated.

90
00:05:55,900 --> 00:05:58,560
And then that will be stored inside this value of that extra.

91
00:05:59,550 --> 00:06:04,580
So how but how to do that, how to update the system whenever the values change so that we have to call

92
00:06:04,590 --> 00:06:06,270
a function on change.

93
00:06:10,840 --> 00:06:11,920
Colin Campbell, change.

94
00:06:15,040 --> 00:06:16,570
So what does this have to change?

95
00:06:18,050 --> 00:06:23,120
In writing the code for that constant annual change.

96
00:06:24,420 --> 00:06:31,250
This will take up, even that means even the means, though, that the thing that is happening like

97
00:06:31,680 --> 00:06:35,700
what the the hand will change that that is even what triggered handle change.

98
00:06:36,300 --> 00:06:41,430
Now, when the handle changes triggered, whenever the values change, then we'll concepts such done

99
00:06:41,700 --> 00:06:47,280
and then send the value that triggered the event, like if we change something like if we type Avengers

100
00:06:47,280 --> 00:06:50,590
into the search box, then that means we are struggling to hang onto it.

101
00:06:50,600 --> 00:06:52,650
That means the search box, the content exchange.

102
00:06:53,130 --> 00:06:57,570
So what will be they even even will with that event regarding to that, the time that we are giving?

103
00:06:57,990 --> 00:07:03,540
I mean, how do we get the value of a venue that is even to the target event to get that value?

104
00:07:05,760 --> 00:07:07,230
Target, not value.

105
00:07:07,980 --> 00:07:14,130
So with this will be basically doing the thing that we need, like whenever the like we type something

106
00:07:14,130 --> 00:07:19,500
inside the search field and the value changes and then values automatically given to such whenever it

107
00:07:19,500 --> 00:07:20,010
is changing.

108
00:07:20,820 --> 00:07:27,790
On one more thing, this when we press enter after typing Somalian press enter when we want to like

109
00:07:27,840 --> 00:07:35,340
get all the YouTube results, like mentioning that that search thing, right, so that we do here on

110
00:07:35,340 --> 00:07:36,240
it on keypress.

111
00:07:37,650 --> 00:07:42,000
So this on key is basically this is also the the problem is presented in the text.

112
00:07:42,210 --> 00:07:43,260
We are simply using it.

113
00:07:43,920 --> 00:07:47,730
The code that we need to perform will be calling a function that is on keeping us.

114
00:07:51,410 --> 00:07:52,670
On Keep Press.

115
00:07:54,410 --> 00:08:04,490
OK, so now again, we have tried to quite frankly keypress similarly constrained on key press reconstruct

116
00:08:04,490 --> 00:08:05,360
political event.

117
00:08:05,750 --> 00:08:08,480
That means they event that triggered the dysfunction.

118
00:08:10,190 --> 00:08:11,090
And then if.

119
00:08:11,900 --> 00:08:14,470
Even is equal to enter even Rocky.

120
00:08:15,780 --> 00:08:17,760
Equals to enter.

121
00:08:19,890 --> 00:08:23,960
Then only we have to submit the request, so on submit.

122
00:08:25,430 --> 00:08:26,360
Such item.

123
00:08:27,200 --> 00:08:28,460
So what should be the search item?

124
00:08:29,660 --> 00:08:34,400
So basically, they're sending this search item, it means the value of the search box this week, sending

125
00:08:34,400 --> 00:08:39,800
plants up on something that is a function that will laden and Burgess will call it will the function

126
00:08:39,800 --> 00:08:40,160
for that.

127
00:08:40,370 --> 00:08:45,770
Why did you do it after fits the data from the YouTube app based on this value and then it related to

128
00:08:45,780 --> 00:08:48,320
Florida will catch it in response and console.log it.

129
00:08:48,320 --> 00:08:48,620
What?

130
00:08:48,780 --> 00:08:49,880
We'll see what is happening.

131
00:08:51,220 --> 00:08:57,760
So this is basically the the like the final version of the search, but no, we haven't boarded it.

132
00:08:57,880 --> 00:08:58,930
We have created the hook.

133
00:08:59,140 --> 00:09:01,930
We have lowered the code for the handlers union on cables.

134
00:09:02,170 --> 00:09:07,050
Finally, we have created the letter style that what the user should this is basically the backend like,

135
00:09:07,360 --> 00:09:09,070
you know, server side coding type of thing.

136
00:09:09,460 --> 00:09:11,550
This does not the user does not see this.

137
00:09:11,560 --> 00:09:13,120
This is the logic that we are using.

138
00:09:13,450 --> 00:09:18,520
The user seizes this, but what we are retaining what we are returning the user to see this and when

139
00:09:18,550 --> 00:09:23,830
he does something on that return, but then the code corresponding to that will happen.

140
00:09:24,700 --> 00:09:26,860
Finally, we have to export the search.

141
00:09:28,010 --> 00:09:31,120
Export before such, but.

142
00:09:34,180 --> 00:09:37,450
So once we exploded, oh god, we have to address and then import it.

143
00:09:42,790 --> 00:09:43,360
And both.

144
00:09:46,250 --> 00:09:46,880
Search, but.

145
00:09:47,960 --> 00:09:53,840
So basically, instead of like now, we created a search bar and we put it in future and future videos

146
00:09:53,840 --> 00:09:58,750
the next week or the next couple of years, we'll create will video list and import them and a very

147
00:09:59,250 --> 00:10:01,190
important visual detail from competence.

148
00:10:01,610 --> 00:10:07,350
So in big projects in like real life industry level projects, there'll be so many companies, like

149
00:10:07,370 --> 00:10:08,900
hundreds and thousands of companies.

150
00:10:09,560 --> 00:10:12,150
So we should not write everything like all 2020.

151
00:10:12,290 --> 00:10:17,570
Every project contains all a thousand less than it is like not meaningful to react like any act.

152
00:10:17,570 --> 00:10:22,220
Basically, we are using to like easy the process of writing code shortening the code.

153
00:10:22,520 --> 00:10:28,310
So what we'll do is we'll create a next largest file and then we'll write a small bit of or we'll explore

154
00:10:28,310 --> 00:10:30,950
the components that we need to export from the conference folder.

155
00:10:31,370 --> 00:10:35,210
And then from that individual, there's going to be importing all the components in a single and we'll

156
00:10:35,210 --> 00:10:38,880
see that in the later part of the project, the first play.

157
00:10:39,170 --> 00:10:44,360
Now we got the search bar that we exported from the search, but our G6.

158
00:10:45,660 --> 00:10:48,930
And then in Georgia, so often exporting it.

159
00:10:50,630 --> 00:10:55,700
Now I'll be writing the function, who handles something I said earlier instead of it.

160
00:10:56,850 --> 00:11:00,150
On some mic, I'm sending a check, I'm sure, how to handle the summit.

161
00:11:00,630 --> 00:11:01,460
I've been avoiding it.

162
00:11:02,460 --> 00:11:03,720
By raising a think function.

163
00:11:05,820 --> 00:11:10,530
I think function, I think, is the good thing in JavaScript for that.

164
00:11:10,740 --> 00:11:14,100
If you want to learn more about that, you can go through the documentation that it does.

165
00:11:14,550 --> 00:11:20,510
It basically says for multiple like multiprocessing grid computing type of thing called what?

166
00:11:20,550 --> 00:11:21,240
Cloud computing?

167
00:11:21,240 --> 00:11:23,850
Basically, you just think of it, that kind of thing, it will help.

168
00:11:24,870 --> 00:11:30,840
So we'll handle the audio, and in some cases, the function name will be taking the search item.

169
00:11:32,440 --> 00:11:37,630
So here's one thing that you have the ideas such, but we have to like, we import research, but let's

170
00:11:37,630 --> 00:11:39,130
all be using the you component.

171
00:11:40,430 --> 00:11:41,420
Search, but.

172
00:11:46,470 --> 00:11:48,960
So we have to stand on Summit.

173
00:11:52,630 --> 00:11:54,250
We'll be sending can submit.

174
00:11:56,250 --> 00:11:56,910
That means.

175
00:11:58,740 --> 00:12:00,180
On Summit is the proper name.

176
00:12:00,570 --> 00:12:06,570
So this is the parent company we are sending it to the child component on, it is a proper name and

177
00:12:06,570 --> 00:12:09,870
we are sending this function handle such as the value of that product.

178
00:12:10,530 --> 00:12:14,250
So instead, the search box when you get that product.

179
00:12:14,610 --> 00:12:20,480
So how to catch the problem we have to capture like here in the search, but we have to because the

180
00:12:20,490 --> 00:12:21,420
answer may pop.

181
00:12:22,620 --> 00:12:23,970
On Summit.

182
00:12:26,860 --> 00:12:30,640
So once we catch it now, they're using it on it.

183
00:12:32,000 --> 00:12:35,410
On answer me, this should be captain, yeah.

184
00:12:36,020 --> 00:12:40,310
So we are catching that drop, and when the key values enter, like when we are entering the surge,

185
00:12:40,520 --> 00:12:41,720
then we are calling that on some.

186
00:12:41,810 --> 00:12:43,190
So check, I'm sending this item.

187
00:12:43,520 --> 00:12:46,430
So basically, we're calling this function or handling something.

188
00:12:46,790 --> 00:12:50,870
And then we're sending the search item that the user typed in the search box.

189
00:12:51,230 --> 00:12:52,880
So now we will be writing the code.

190
00:12:52,880 --> 00:12:54,560
Find out what to do after that.

191
00:12:55,430 --> 00:12:57,470
No, we'll create some response.

192
00:13:02,340 --> 00:13:04,680
And we'll be using that rate of aid.

193
00:13:05,370 --> 00:13:08,610
This is basically hitting the EPA YouTube target.

194
00:13:13,980 --> 00:13:16,020
Such common.

195
00:13:18,440 --> 00:13:20,420
And then we need to send up atoms parameters.

196
00:13:22,270 --> 00:13:24,130
Barometers will be part will be snippet.

197
00:13:25,910 --> 00:13:31,190
I'll explain the cooperating, so this way, patiently reviewing each and every line.

198
00:13:32,390 --> 00:13:32,900
Snippet.

199
00:13:34,130 --> 00:13:36,860
Max results will be five.

200
00:13:38,250 --> 00:13:44,160
And then key key will be like we we the key Somalia in the YouTube, don't you?

201
00:13:45,100 --> 00:13:46,540
So we will be copping this.

202
00:13:46,810 --> 00:13:53,050
This is a VIP and will be using gear should be sent as a string, so just add a couple of minutes if.

203
00:13:55,160 --> 00:13:55,410
It.

204
00:13:55,650 --> 00:13:56,070
Oh, yeah.

205
00:13:57,270 --> 00:13:58,290
And you will be.

206
00:13:59,440 --> 00:14:00,700
Search item.

207
00:14:02,980 --> 00:14:03,250
I.

208
00:14:07,480 --> 00:14:07,840
So you.

209
00:14:14,970 --> 00:14:16,170
And after this, when?

210
00:14:18,130 --> 00:14:21,250
Console not log the response.

211
00:14:27,580 --> 00:14:33,010
So what we are doing is, as I explained, everything like how to handle submarine props, that we are

212
00:14:33,010 --> 00:14:39,250
getting such items, what the user want, what kind of videos the user right now will be asking YouTube

213
00:14:39,580 --> 00:14:40,420
to get that.

214
00:14:40,720 --> 00:14:44,410
And then here search search will be the parameters.

215
00:14:44,860 --> 00:14:48,040
On what basis the UPI should search for these values?

216
00:14:48,580 --> 00:14:53,920
Ed Henry from the Tacoma OK for the parameters will be back, but this is the default parameter like

217
00:14:54,190 --> 00:14:59,710
we have to get maximum fine means like how many mediums we want to return next.

218
00:14:59,800 --> 00:15:02,350
The whether we want five meters, not too many radios.

219
00:15:02,680 --> 00:15:08,260
I have to give day Becky and the Q Q parameter and what data like the onwhat like.

220
00:15:08,280 --> 00:15:11,290
If you open you and search something, you'll get details regarding it.

221
00:15:11,760 --> 00:15:14,110
It basically Q depends to what you are searching for.

222
00:15:14,110 --> 00:15:20,230
That is the search item that is permeating from there, you know, as the parameter for the channel

223
00:15:20,230 --> 00:15:22,180
and submit from its channel component.

224
00:15:22,570 --> 00:15:25,990
And then finally, we'll see what response the YouTube app is giving us.

225
00:15:26,500 --> 00:15:26,800
Thank.

226
00:15:27,980 --> 00:15:28,730
Oh, so.

227
00:15:33,790 --> 00:15:38,080
So that is a I wrote about it in search bar projects, which item is not defined?

228
00:15:39,270 --> 00:15:40,230
Search by.

229
00:15:42,210 --> 00:15:44,940
OK, so I haven't used any such item, right?

230
00:15:49,310 --> 00:15:51,520
So you basically ordered such dome?

231
00:15:53,260 --> 00:15:55,930
So it shouldn't it should not be such done.

232
00:15:58,580 --> 00:16:00,760
So it should be such a.

233
00:16:03,530 --> 00:16:03,790
I.

234
00:16:07,080 --> 00:16:07,320
Yeah.

235
00:16:07,620 --> 00:16:12,960
So finally, we got the, you know, the thing that we wanted to be trail here, you can search for

236
00:16:12,960 --> 00:16:14,370
the let me open the.

237
00:16:15,890 --> 00:16:17,330
Countdown to the council.

238
00:16:18,590 --> 00:16:18,920
OK.

239
00:16:20,350 --> 00:16:20,890
So, no.

240
00:16:22,410 --> 00:16:24,150
I'll be typing react.

241
00:16:24,270 --> 00:16:24,750
Yes.

242
00:16:26,310 --> 00:16:31,240
As you can see, the night time practice and click done and you are getting some response, is this

243
00:16:31,260 --> 00:16:36,150
response you can see from the data the handles the request and said the data, you will be having the

244
00:16:36,150 --> 00:16:41,220
items and then see all the kind of YouTube like diary of that video.

245
00:16:41,220 --> 00:16:46,770
The snippet published at the China lady titled Reactor Building in these the title of the video.

246
00:16:47,460 --> 00:16:49,710
So basically, OK, now search for Avengers.

247
00:16:51,030 --> 00:16:58,350
Yes, let me clear this concern of a big one, enter, I'm getting a response.

248
00:16:58,590 --> 00:16:58,850
Yeah.

249
00:16:59,370 --> 00:17:01,530
Go to data items.

250
00:17:02,710 --> 00:17:09,670
We can directly print this data are not items, and you can see that to gold here and go to our Dodgers

251
00:17:09,670 --> 00:17:14,410
and just response dot data dot items.

252
00:17:17,230 --> 00:17:17,980
To do that.

253
00:17:20,010 --> 00:17:20,880
You can now check.

254
00:17:24,310 --> 00:17:27,880
Yeah, so you are simply getting no items that only the video details.

255
00:17:28,330 --> 00:17:33,850
So the first thing is a video titled Seven Years and then there is some tidal channel lady at what time

256
00:17:33,850 --> 00:17:38,410
they published it, what kind a prototype, everything that completed all of that video we are getting.

257
00:17:38,830 --> 00:17:44,650
So this is the response that we'll get from the appeal of the YouTube video that we are using and said

258
00:17:44,660 --> 00:17:47,650
the other parties were basically taught how to do everything.

259
00:17:48,100 --> 00:17:53,210
So with this, we completed the search by implementation means searching something, getting the video

260
00:17:53,230 --> 00:17:53,650
details.

261
00:17:54,010 --> 00:17:59,770
So now how to use these video details and then create the videos like the main video and then the writers

262
00:17:59,770 --> 00:18:02,050
are getting some four to five videos for that.

263
00:18:02,050 --> 00:18:04,030
If we click on them, you can view the video.

264
00:18:04,780 --> 00:18:08,320
Oh, as you see, as you can see in YouTube, that will see from the next feed.