Okay, so now we're going to create our search box component.
So in our components folder, let's create search box dot JS x.
And we're going to bring some stuff in here.
So up at the top, let's import use state because this is going to be a form.
So we want component state.
We're also going to use the form and button components from React Bootstrap.
And then also we need to get the the keyword from the URL.
So we're going to bring in use params from React router dom.
Let's also bring in use navigate so we can redirect as well.
And then down here inside search box.
Let's initialize our navigate.
And then I want to get the keyword from use params.
So let's say const.
Keyword.
From use params, although I'm going to rename it here to URL keyword and then we'll have our state
for our keyword oops.
And we're going to pass in the URL keyword as the default for that state.
Now down in the return let's have our form.
So the parent element here will be a form.
It's going to have an onsubmit and we'll set that to a submit handler.
Okay.
And then I'm also going to add just a class name here.
And that's going to be D flex.
So we'll display it as a flex box.
And then inside the form we'll have a form control, which will be a type of text.
The name is going to be Q for Query, and then we'll have an on change that's going to set the keyword
state and the placeholder.
Actually, we need a value too.
So value is going to be the keyword, and then the placeholder will say search products, and then we're
going to have a couple class names, just margin, right, small two margin left, small five, and
that should do it for our form control.
Now under that, we're going to have our button, so it'll have a type of submit variant will be outlined.
Success P two.
Let's also do RM two.
So some margin on the x axis and we'll have our our text which will be search and then our closing button.
Okay, now we need to add in, create the submit handler.
So let's do that.
So first we want to prevent the default.
And then what I'm going to do here is check for the keyword.
So if keyword and we can use trim, I wasn't going to, but I guess we'll just keep it there and then
we're going to navigate to search and then whatever that keyword is, Else if there's no keyword, then
we just navigate to just stay on the home page.
All right.
We'll always be the home page, but, you know, implementing the search.
So let's save this and let's bring this in.
We're going to go to the header because that's where we want this.
So let's see.
We'll just go, like, right here and import the search box.
And let's see.
So we have our NAV.
I want to put it.
Right under this right here.
The NAV with the class name of Ms..
Auto.
So let's say search box.
And we need to actually we know we're not going to pass anything into it.
So let's see if that shows up.
Okay, So if I were to put in here, like, phone and click search.
There we go.
So now all it's doing is navigating to search slash whatever I put in here.
Okay.
All the other stuff is all done from the last video.
Now, this button, I don't know.
I kind of don't like how that looks.
See if we could do something about that.
So outline success.
Is there an outline light?
Let's see if that's a thing.
Yeah.
Yeah, I think that looks better.
It's more readable, but you can experiment with it.
You can change the look of that and anything else you want, but I think that looks pretty decent.
So if we search for, let's say, camera.
Good.
Now, one other thing I want to do is just have a back button, because once we search, there's like,
there's nothing else for us to do unless we click the browser back button, but we should have it in
the UI.
So what we'll do is go to the home screen.
Where screens screen, home screen.
And let's see, we're going to go up to the top here.
And let's say.
If keyword.
Then we're going to show a link.
And the link is going to go to just the home page slash and we'll say go back.
Yeah.
So let's do that.
Link is not defined.
We just need to bring in this import link.
And now we can go back and let's.
Let's push.
Push everything down a little bit.
So it should be able to add on to this, let's say, margin bottom for see if that works.
Yeah, that looks good.
So back so now when we search, we can go back.
We should probably clear the search box, too, once we once we actually make a search.
So in the.
Um, submit handler here.
Let's see.
We'll go.
Yeah, we'll just go right here and let's say set keyword.
To just nothing.
Okay, so now if I search, search for phone.
Okay.
So that clears up.
I think that's.
That's a little better.
All right, cool.
So now we have search fully working.
In the next video, we're going to create our carousel because I want to have a carousel up here that
will show the top products.