I'm inside of our repositories list component, so inside of here, there's some pretty basic stuff
we need to get started with.
We need to make sure that we add in a piece of state that is going to track whatever user types into
the text input.
We then need to make sure that we detect form submission.
Whenever a user submits the form, we then want to call that action creator.
That is going to make a request off to the NPM API for us.
After we call that action Krater, we then eventually need to get some of our redock state into this
component and render our list of found packages inside of here.
So I think you can kind of guess how this stuff is going to go at the very top.
Let's first get started by importing.
Use state from react, so we're going to use some local state to track whatever user types into that
input.
I will define.
A piece of state inside of your called term.
And I'll give it initial value of empty string and then we will set up an on change and a value prop
on the input itself, so a value prop of term and an unchanged prop of event, which I will abbreviate
as E and we'll do a set term E target value.
OK, after that, let's set up our event listener on the form and watch for a submission event so I
will add on and on submit whenever that event occurs.
I will call a callback function that we will call simply on simit.
I'll define that up here.
Now, remember, because this is a form submission event, if we just allow the behavior to behave as
usual, then as soon as a user submits the form, the browser will refresh the page.
Let's see that in action really quickly.
We go back over.
And click on Search, you'll notice that everything kind of refreshes whenever we click on Search.
Again, that is because we are submitting the form which triggers a browser form submission that is
almost always not the behavior that we want inside of reactor application.
So to prevent that behavior, we're going to receive an event object as the first argument to submit
and we need to call event prevent default inside their.
But we do have to provide a type for that event object and remember how we do that whenever we define
a callback function that we pass off to an event handler, as we're doing right here.
All we have to do is hover over and submit will then get an inferred type for that event argument so
we can really just copy that type right there.
And apply it as the annotation for that event object and then the air goes away again.
That's the really easy way to make sure you set up the correct types or these callback events.
OK, so now if we save this.
And now try to estimate whenever I click on search, no longer do I get that refreshed behavior.
Very good.
OK, so now inside of on summit, the only thing we really have to do is call our action creator.
So let's take a look at how we're going to wire that up in just a moment.