Yep.
And next thing we need to do is we need to have a little fancy form at the top where we can say, how
many results do we want to get and what kind of search term do we want to use?
Yeah.
So the way to do that.
If we go down to our return element down here for the whole app.
The one with the Classname app here.
And we start to make a form.
So we say form and then we say on submit.
Let me say this handle submit.
So this is what's going this is a function that's being called once we submit the form.
And we're going to write that up here.
Handle submit.
And that's.
Well, we're basically query the API with our parameters.
Now, let's see.
Let's see.
Oh, it just.
Remove the intake of the form.
I didn't want that.
So we put in a label here.
Let's call it the amount, the number of items we want to get.
And we have an input of the type number.
And we have a value of this input which is going to be equal to this state dot amount.
And we have a unchange.
So what happens when we change this amount?
We'll call the function this handle amount change.
I enclose the input tag and.
That should be it.
Now, let's see.
So now we have this little amount here, but there's no value inside because we haven't defined a state
or amount value inside our state.
Up into constructor.
Let's go and add the amount.
Set it by default to be three when you start up.
And you can see it sets it to free here.
Now nothing happens.
Also, when I click on the buttons and try to change it, it's it stuck at three.
And the reason is we need to write the handle on a handle amount change function.
Let's go ahead and write that handle amount change.
And in here we are going to take in an event.
And then we set the state.
Be equal to.
I mean, we set the amount state to be equal to the event.
Target.
Value.
So that's basically react getting the whatever value you're setting this input box to be.
Now if we start, try and run it again.
Nothing happens again because it says it cannot read property.
Set state of undefined.
So it's like this is undefined and in react whenever you write a function.
Most of the time, especially when you call it from the render function here.
If you want to use this in it.
You need to bind it.
The way to find it is to write this handle amount change and you write this handle amount change, not
bind this.
And I could go into a wild explanation about why this works.
It has something to do with the context of this disappearing in JavaScript.
I can't remember exactly how it works.
I just don't to.
Anytime I want to use this inside of a function, I usually have to bind it, which you can do inside
the constructor, for example.
Like this.
So remember to bind it.
And then.
We can change the change, the amount value to anything we want to.
This next thing is we should have a little submit button here.
So when we submit it, it's going to get ten amounts of the traces we searched for.
So remember on the form, we had this on submit that says that's making a call to this handle, submit.
Let's do that.
So let's write out that function.
So first thing we'll do is to say event preventdefault.
So that's going to prevent the form from refreshing our app to prevent it from just displaying the same
results again.
Now what we're going to do is we're going to call the API instead with this parameter, which is from
the amount instead.
So we will say, uh, fetch products.
This dot fetch products.
And we'll pass in the.
This state amount.
And we add the parameter amount here.
And also remember to bind the function.
So this handle submit.
This handle.
Submit dot.
Bind this.
And let's pass in.
Let's.
Turn this into a string little so backticks instead of the quotes.
And then put in a dollar sign curly braces and pass in amount instead.
And instead of having it at.
Component.
Well, we can do componentdidmount and just pass in this state amount here.
So it starts out having the three amounts.
Uh, unexpected use of event on line 31.
That is because I don't have the event in my argument here for Handlesubmit, so just add that.
So now it starts out with componentdidmount.
It fetches the default amount of free.
We can change the amount here.
We still need a submit button, but we we have written out our handle submit.
Let's add the input submit button.
So input type submit.
Submit.
And value submit.
Close attack.
Now we have a submit button here.
Let's change it to 12.
And there we go.
So now you can see there's more results now.
So now we're getting 12 traces instead of just three.
Let's change it again to 20.
You can see it adds more products.
Now.
So now we can change the amount and.
Now the next step is to also change the search query inside of this form.
So we need to add another input type of text where we can type in the search query and pass it to our
API.