So now we have our androgynous about GSX, so now it's time to move into a search bar and add some code
to it.
So just move into a search bar.
And we'll be importing React, which we already have done and inside do what they're going to do is
that will create a section.
Now this section is going to be holding another child component to inside the section will be having
a fun.
Because this is a search bar.
So now let's just put up a phone in this and inside this one, we're going to have an input, which
is our search searchable input.
So instead, this input, let's give it a class name of maybe from control.
And after that last name will also give it a placeholder place a little.
Its characters.
And not the case will also give it autofocus.
And I thought of our guys will also give it a text type of text, which is by default, text only.
And I will also give it a name, which is again going to be called to search.
And after a lot to give it a value.
Of empty string.
And this is not going to be an institution or industry, we will be using you data back.
But before we do that, let's just give it an empty string for now.
And our own judgment, which is reconfiguring shortly.
So when I left, seemingly with an empty string and after the change exited with an 80.
Of search.
Now we should close this.
OK, so we have a phone inside the phone, we have a study, we have a death inside this, do we have
this action and a phone and an input?
Now let's just put it to work.
OK, so it looks nice now it's time to add stake into our search bar.
And since this is the fictional component, so guess what?
We would be using hooks and again will be using the use state.
OK?
And Justin's idea of a functional component will be controlling stake for holding our text.
And initially, we want us it takes to be equal to equal to use state and instead used, it will be
putting up just an empty string because initially we won the value of X to be an industry.
Now we'll be creating a function to handle this change.
And let's just call it and change.
And this is again going to be an error of function.
Now what it is going to do, it is going to set the value set that should be equal to it or target or
value.
Now after this set out already.
Which we are receiving from our abductees, so if we just take a look at our outrageous just.
So we are passing it, said query as a parameter or as a prop.
So let's just a structure that said query.
So really, putting up after this set great equals two.
It should be when you go to it or target, don't value.
No, this is a text that we're putting up inside our value.
So just move into your value, which we just put in as an empty string before and put it equal to text
inside the codebases.
Now this form needs to have an on summit property, so we'll just put it in on summit.
This on an hour, this engineer is going to be able to handle change.
So let's just put it as handle change.
And hit save, so now we have even configured a search of our logistics.
Now it's time to move into a catalyst.
But before we do that, we need to have data in our application, right?
That is the very reason that we are making this up.
So for that?