We're now going to start to implement the text input that the user is going to type a search term into.
And one thing I want to mention here is that we go back to original mockup right here.
You'll notice that we only have a text input and there's no button next to it to submit this search
term or anything like that.
So the overall goal here is to make sure that every single time a user type something in another character,
every single key press, we're going to do another search of the API.
That's going to be a little bit inefficient to search the API so often.
But we will take a look at how to add in some code to kind of restrict or throttle the number of searches
that we make.
But we'll worry about that a little bit later.
Right now, all I want to do is mentioned that there is no separate submit button or anything like that.
Let's create this text input.
We're going to first begin by writing out a little G.S. X block inside of our search component.
I'm going to delete the H1.
I going to put in a set of parentheses and return a bullet.
Big day ASX block offers.
Begin with creating a div.
And we're going to add in a couple other elements.
With a couple of class names, just two applies in styling.
So here we go.
I got to put in a div with the class name of UI form and close it off.
I'll put in a div with the class name of field.
And close it off.
Well, then put in a label.
With the text enter search term.
And then after that, in input with the class name of input and close that tag.
Let's go back over to our browser and see what that looks like.
OK.
So we should have something like this right here.
Nice looking label and a text input that for right now spans the entire with the screen.
Well, we got a text input.
Now, remember, we are using hooks here to track our state.
We're not making use of Class-Based components or anything like that.
Nonetheless, we still use the exact same approach for managing typing into an input as we did with
class based components.
That means that we are still going to assign a value prop to this input.
We are still going to assign an unchanged event handler any time the value inside that input has changed.
We are going to update our heads of state.
That's going to keep track of the value, that input that is going to cause our component to re render.
And we will see the new value inside the input up here on the screen.
We're still doing all the same management of a text input, even though we are using Hooke's.
So we need to create a piece of state that's going to keep track of the value type inside there do so,
we will make use of the you state hook and to do so.
Well, we need to import you state from react at the very top.
I will import you state.
Then at the top of my search component, I'm going to create a new piece of state.
I think a reasonable name for the state would be simply term similar to what we did back on our YouTube
application.
We'll get term, inset term.
And I'll provide a default value of an empty string.
We'll then wire up a term and set term to the value prop and the unchanged prop of the input element
right here.
I to first begin by giving myself a little space.
Well, then set the value as being term.
And then on change will be event, which are going to abbreviate simply as E right now.
And we'll call set term and provide the new value for the term, which will be e get value.
I can't say it enough.
All the same mechanics apply around managing and input.
Even though we are using a you state hook instead of a class component.
Let's save this.
Look back over the browser and I just want to make sure that I can type something inside of here and
every everything still work as expected.
Yep, I can type in there just fine, and I don't see any errors inside my console.
I do see a couple of warnings right now, but those warnings are totally fine.
I just don't see any errors.
That's what I really care about for now.
OK, so we've got some text input now that we can detect a user typing inside that input and we know
what they're typing.
We now need to make sure that we do a search of the API with every request that is issued for that,
that we really have two options available to us.
And when we are going to issue that request, let's take a pause right here and then figure out and
discuss what the two options are.
Do we ever making this request?