Before I start working on the single cocktail page, I would want to set up my form or essentially as
the user is typing, we are refactoring the cocktails.
And in order to do that, of course, we need to navigate there.
I'll start with my return.
But like I already previously mentioned, we will spice things up.
And instead of controlled input, I'm going to go with uncontrolled input.
So you can probably already guess that, yes, we're going to use a use rough.
So before we set up anything on the Gold Coast and online search and I'll call the search value is equal
to react and then use rough, as you can see.
If I don't want to, I don't have to import it can simply go with react and not use rough and by default
it's just going to be empty string.
And then before we set up use affect or functions and all that cool stuff, I just worry about our return.
Where we go with S. It's going to have two classes here, can I have class of section and online search
so online and search the section?
I don't want to go with form with the class of search hyphen form for now.
Eventually we will add on, submit and I'll show you why.
So we our search for awesome online, we're going to go there with a class of form hyphen control and
instead of this day.
Let's go with label and I'm going to have the idea of a name.
And as far as the text value, let's go search your favorite.
And then cocktail, cocktail.
OK, awesome.
But it we should see something like this and then right after the label we're going to go with input.
It's going to be a text.
Let's add an idea and it should be name.
And then, of course, I would also want to set up my user.
So say Reath is equal to search and value.
OK, awesome.
And what's the plan now?
Well, every time the user type something in input, I would want to invoke set search term, which
in turn of course will invoke the user.
Correct.
Where will fetch drinks or of course the value now change since it's not going to be a it's going to
be whatever we are typing.
Correct.
Because we have value of search term.
So we have our set search term, which of course will change this value the search term, and then will
perform a fetch and get those new values back.
The cool thing is that we can still set up the on change and so here on change and I'll set it equal
to some kind of function that I'm going to create and I'm going to call this search.
OK, awesome, can save it now, of course, react complains because there's no such function, so we'll
go const and then search.
Cocktail, that is my function, and then how can we access this value when it comes to user or simply
we go with our function so set search term and then we pass in the search value dot current and then
the value, whatever is in the form.
So now every time we all type something, of course we will get the new drinks.
There it is.
Now as I'm typing notice how we are getting drinks.
And then eventually, of course, we hit the error because there is no cocktails that match that particular
input value.
So again, we go with something and we are getting our drinks, but then eventually if we start adding
gibberish, we'll get no cocktails matched your search.
Now we're almost done.
But there's two things that I would want to add.
First of all, I would want to set up my focus on the input, and I can do that simply by running react.
And then use the fact is a fact, and as you can see here on purpose, I'm just showcasing that we don't
always need to import our mind when I would want to call it when the component renders and I'm just
going to go focus function again in order to access my input, I need to go with search value and then
that and current, of course, and then focus.
So once I run my focus, you'll notice that the moment I renders it will have the focus.
Beautiful.
And then lastly, you'll notice also something very interesting where even though we don't have the
subnet, since we're not handling that, if the user just presses enter, notice how we are reloading
the application and that is not the behavior that I would want.
So instead, what we're going to set up is on subnet and we'll just make sure that we're preventing
the default.
So where we have the form, we're going to go on segment and then we'll have our handle segment.
So handle and submit.
OK, awesome.
And then I would want to come up with function, so handle and submit.
Now I do want the event object and then I would want to just go with it and then prevent.
And of course the name of the function was prevent default.
Now if the user is pressing, enter notice how we're not rushing our application, which is just awesome.
Again, another flavor, how we can set up the input that is using the uncontrolled input where we use
user F and then we have that current property.
And then more specifically, we're looking for the value, since that is how we can access values in
the input using JavaScript.
So simply we can start typing our values here.
And I think in this case, the out notice how we're getting back the cocktail's.
So while we still have the cocktail's, of course we display them on screen and eventually we have no
cocktail's.
Match your search criteria.