In this video, we'll see how to implement the search bar component.
So in the previous video, we have created the components that we request.
And also, there will be further components that we need to create, as I said, the video item present
in the video.
That component and also like a component that exports all the components of the single line so that
instead of importing each and every component for one line, we can simply light logic and set the next
dodges, which helps us to export all the components present.
Insert the components for export as one single line so we can simply use one single line and export
all the components that we use in that dodges that will build in the future.
So now in this regard, area of interest is completing this search component and then using it in our
budgets.
When you get started with that first, listen to this Jan. six.
No need to import react, but we need to use a state.
So I'll be using the U.S. took.
So important that the U.S. took.
They react like an ex from materially white.
I'll be putting paper and text field.
So this is basically to get the search bar and search bar kind of thing, OK?
Paper and.
Next field.
Immediately.
Soft additional will be creating the search bar constant that we will export and write all the code
inside that.
Search, but.
So instead, this will be returning.
Oh, a small just a paper.
So this paper will be the elevation will be six and a in the previous video, so this is not an area
of interest like how we react materially, why it works and what the attributes, what this elevation
is.
All things do, you can simply go to this documentation, check what these things do and also search
that Google and documentation.
This is basically the styling styling of the repair that is basically we can do with using HDMI L forms
or alleged email forms and courses, but instead of that, we're using already some components that
are built by other developers.
We are using it and they're using time project.
We're importing them and using project.
First thing, we installed them npm install and then import them.
And then and then we are using them.
Those styling will be some customs duties.
I'll give some batting order.
Adding will be if I pick sense.
And then after that, we'll be having our next field.
Here inside the text field.
Well, this will be an automatic closing back.
Further, our props will be.
So what do you mean by props?
So as you can see, for example, we will have a default HD image elements such as hit one paragraph
hedge to edge through image that like that?
Well, we may suppose you take image back.
Oh, if you take like if you take.
You made sure that you love sauce and that alternative, they had basically the attributes of that tag
here.
This is the original that we are getting by had similar knowledge, given that it has been this is the
default.
But what if we want to build bags like belongings roughly made?
We want something like I said, search box Vegemite is also not as general, basically recalling it
as component because it is.
The customization that we are making is that custom pack.
So similarly, we are negating tags.
You can also have the properties, the attributes that they have here.
They are gone as props.
OK, so here these are everything that we use with the props.
And a prop for Let It Be It.
And then Labor will be.
So these are the props that are already present inside the actual document that we are using.
OK.
These are development that some developer that developed this paper texture and everything materially.
We're simply using them for their styling purpose.
So the label research.
OK, so now after this is done, we will be using the state for this such.
Constant.
Search don't.
Someone said search don't.
Is it going to use state?
So what this line is, basically we are creating two things one is search term search term is a constant.
It's a constant and varies in constant fear to constant.
That store some value.
OK.
And then what is the said search done does is this is the second parameter that means it is a function.
It is a function that changes the value of this constant.
OK.
So whenever we want to change the search term value, then we'll be calling this search term function.
Initially, the search term value will be interesting.
So initially, when there is nothing, the value of the text field will be in a search term.
Whenever we are changing search term, then the said search term and change that.
And also it will like keep the value of that search term to the next week.
So that will do it.
So the value will be search term.
So whenever we are changing the value in the search bar, then this gets updated.
And then that will be stored inside this value of that extra.
So how but how to do that, how to update the system whenever the values change so that we have to call
a function on change.
Colin Campbell, change.
So what does this have to change?
In writing the code for that constant annual change.
This will take up, even that means even the means, though, that the thing that is happening like
what the the hand will change that that is even what triggered handle change.
Now, when the handle changes triggered, whenever the values change, then we'll concepts such done
and then send the value that triggered the event, like if we change something like if we type Avengers
into the search box, then that means we are struggling to hang onto it.
That means the search box, the content exchange.
So what will be they even even will with that event regarding to that, the time that we are giving?
I mean, how do we get the value of a venue that is even to the target event to get that value?
Target, not value.
So with this will be basically doing the thing that we need, like whenever the like we type something
inside the search field and the value changes and then values automatically given to such whenever it
is changing.
On one more thing, this when we press enter after typing Somalian press enter when we want to like
get all the YouTube results, like mentioning that that search thing, right, so that we do here on
it on keypress.
So this on key is basically this is also the the problem is presented in the text.
We are simply using it.
The code that we need to perform will be calling a function that is on keeping us.
On Keep Press.
OK, so now again, we have tried to quite frankly keypress similarly constrained on key press reconstruct
political event.
That means they event that triggered the dysfunction.
And then if.
Even is equal to enter even Rocky.
Equals to enter.
Then only we have to submit the request, so on submit.
Such item.
So what should be the search item?
So basically, they're sending this search item, it means the value of the search box this week, sending
plants up on something that is a function that will laden and Burgess will call it will the function
for that.
Why did you do it after fits the data from the YouTube app based on this value and then it related to
Florida will catch it in response and console.log it.
What?
We'll see what is happening.
So this is basically the the like the final version of the search, but no, we haven't boarded it.
We have created the hook.
We have lowered the code for the handlers union on cables.
Finally, we have created the letter style that what the user should this is basically the backend like,
you know, server side coding type of thing.
This does not the user does not see this.
This is the logic that we are using.
The user seizes this, but what we are retaining what we are returning the user to see this and when
he does something on that return, but then the code corresponding to that will happen.
Finally, we have to export the search.
Export before such, but.
So once we exploded, oh god, we have to address and then import it.
And both.
Search, but.
So basically, instead of like now, we created a search bar and we put it in future and future videos
the next week or the next couple of years, we'll create will video list and import them and a very
important visual detail from competence.
So in big projects in like real life industry level projects, there'll be so many companies, like
hundreds and thousands of companies.
So we should not write everything like all 2020.
Every project contains all a thousand less than it is like not meaningful to react like any act.
Basically, we are using to like easy the process of writing code shortening the code.
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
the components that we need to export from the conference folder.
And then from that individual, there's going to be importing all the components in a single and we'll
see that in the later part of the project, the first play.
Now we got the search bar that we exported from the search, but our G6.
And then in Georgia, so often exporting it.
Now I'll be writing the function, who handles something I said earlier instead of it.
On some mic, I'm sending a check, I'm sure, how to handle the summit.
I've been avoiding it.
By raising a think function.
I think function, I think, is the good thing in JavaScript for that.
If you want to learn more about that, you can go through the documentation that it does.
It basically says for multiple like multiprocessing grid computing type of thing called what?
Cloud computing?
Basically, you just think of it, that kind of thing, it will help.
So we'll handle the audio, and in some cases, the function name will be taking the search item.
So here's one thing that you have the ideas such, but we have to like, we import research, but let's
all be using the you component.
Search, but.
So we have to stand on Summit.
We'll be sending can submit.
That means.
On Summit is the proper name.
So this is the parent company we are sending it to the child component on, it is a proper name and
we are sending this function handle such as the value of that product.
So instead, the search box when you get that product.
So how to catch the problem we have to capture like here in the search, but we have to because the
answer may pop.
On Summit.
So once we catch it now, they're using it on it.
On answer me, this should be captain, yeah.
So we are catching that drop, and when the key values enter, like when we are entering the surge,
then we are calling that on some.
So check, I'm sending this item.
So basically, we're calling this function or handling something.
And then we're sending the search item that the user typed in the search box.
So now we will be writing the code.
Find out what to do after that.
No, we'll create some response.
And we'll be using that rate of aid.
This is basically hitting the EPA YouTube target.
Such common.
And then we need to send up atoms parameters.
Barometers will be part will be snippet.
I'll explain the cooperating, so this way, patiently reviewing each and every line.
Snippet.
Max results will be five.
And then key key will be like we we the key Somalia in the YouTube, don't you?
So we will be copping this.
This is a VIP and will be using gear should be sent as a string, so just add a couple of minutes if.
It.
Oh, yeah.
And you will be.
Search item.
I.
So you.
And after this, when?
Console not log the response.
So what we are doing is, as I explained, everything like how to handle submarine props, that we are
getting such items, what the user want, what kind of videos the user right now will be asking YouTube
to get that.
And then here search search will be the parameters.
On what basis the UPI should search for these values?
Ed Henry from the Tacoma OK for the parameters will be back, but this is the default parameter like
we have to get maximum fine means like how many mediums we want to return next.
The whether we want five meters, not too many radios.
I have to give day Becky and the Q Q parameter and what data like the onwhat like.
If you open you and search something, you'll get details regarding it.
It basically Q depends to what you are searching for.
That is the search item that is permeating from there, you know, as the parameter for the channel
and submit from its channel component.
And then finally, we'll see what response the YouTube app is giving us.
Thank.
Oh, so.
So that is a I wrote about it in search bar projects, which item is not defined?
Search by.
OK, so I haven't used any such item, right?
So you basically ordered such dome?
So it shouldn't it should not be such done.
So it should be such a.
I.
Yeah.
So finally, we got the, you know, the thing that we wanted to be trail here, you can search for
the let me open the.
Countdown to the council.
OK.
So, no.
I'll be typing react.
Yes.
As you can see, the night time practice and click done and you are getting some response, is this
response you can see from the data the handles the request and said the data, you will be having the
items and then see all the kind of YouTube like diary of that video.
The snippet published at the China lady titled Reactor Building in these the title of the video.
So basically, OK, now search for Avengers.
Yes, let me clear this concern of a big one, enter, I'm getting a response.
Yeah.
Go to data items.
We can directly print this data are not items, and you can see that to gold here and go to our Dodgers
and just response dot data dot items.
To do that.
You can now check.
Yeah, so you are simply getting no items that only the video details.
So the first thing is a video titled Seven Years and then there is some tidal channel lady at what time
they published it, what kind a prototype, everything that completed all of that video we are getting.
So this is the response that we'll get from the appeal of the YouTube video that we are using and said
the other parties were basically taught how to do everything.
So with this, we completed the search by implementation means searching something, getting the video
details.
So now how to use these video details and then create the videos like the main video and then the writers
are getting some four to five videos for that.
If we click on them, you can view the video.
Oh, as you see, as you can see in YouTube, that will see from the next feed.