WEBVTT 00:01.220 --> 00:01.780 Yep. 00:02.090 --> 00:09.200 And next thing we need to do is we need to have a little fancy form at the top where we can say, how 00:09.200 --> 00:14.090 many results do we want to get and what kind of search term do we want to use? 00:14.600 --> 00:15.140 Yeah. 00:15.140 --> 00:16.970 So the way to do that. 00:18.780 --> 00:23.910 If we go down to our return element down here for the whole app. 00:24.900 --> 00:27.420 The one with the Classname app here. 00:28.250 --> 00:30.260 And we start to make a form. 00:33.080 --> 00:37.070 So we say form and then we say on submit. 00:38.850 --> 00:42.760 Let me say this handle submit. 00:42.760 --> 00:48.610 So this is what's going this is a function that's being called once we submit the form. 00:50.760 --> 00:53.460 And we're going to write that up here. 00:54.550 --> 00:56.140 Handle submit. 00:59.110 --> 01:00.040 And that's. 01:00.920 --> 01:08.030 Well, we're basically query the API with our parameters. 01:10.550 --> 01:11.720 Now, let's see. 01:11.720 --> 01:12.320 Let's see. 01:12.980 --> 01:14.060 Oh, it just. 01:16.390 --> 01:18.100 Remove the intake of the form. 01:18.100 --> 01:19.210 I didn't want that. 01:20.760 --> 01:22.890 So we put in a label here. 01:22.950 --> 01:28.740 Let's call it the amount, the number of items we want to get. 01:29.250 --> 01:34.080 And we have an input of the type number. 01:35.550 --> 01:42.090 And we have a value of this input which is going to be equal to this state dot amount. 01:43.050 --> 01:45.330 And we have a unchange. 01:45.330 --> 01:49.090 So what happens when we change this amount? 01:49.630 --> 01:53.940 We'll call the function this handle amount change. 01:56.440 --> 01:59.590 I enclose the input tag and. 02:01.000 --> 02:02.200 That should be it. 02:04.530 --> 02:05.370 Now, let's see. 02:06.920 --> 02:14.720 So now we have this little amount here, but there's no value inside because we haven't defined a state 02:14.720 --> 02:17.570 or amount value inside our state. 02:18.840 --> 02:20.070 Up into constructor. 02:20.070 --> 02:22.560 Let's go and add the amount. 02:22.620 --> 02:25.920 Set it by default to be three when you start up. 02:27.540 --> 02:30.360 And you can see it sets it to free here. 02:31.370 --> 02:32.690 Now nothing happens. 02:32.690 --> 02:37.760 Also, when I click on the buttons and try to change it, it's it stuck at three. 02:38.300 --> 02:44.630 And the reason is we need to write the handle on a handle amount change function. 02:46.060 --> 02:50.680 Let's go ahead and write that handle amount change. 02:54.250 --> 02:58.990 And in here we are going to take in an event. 03:02.550 --> 03:04.890 And then we set the state. 03:07.210 --> 03:08.440 Be equal to. 03:08.460 --> 03:13.270 I mean, we set the amount state to be equal to the event. 03:14.030 --> 03:15.080 Target. 03:15.570 --> 03:16.200 Value. 03:16.200 --> 03:22.920 So that's basically react getting the whatever value you're setting this input box to be. 03:23.970 --> 03:26.730 Now if we start, try and run it again. 03:28.180 --> 03:31.840 Nothing happens again because it says it cannot read property. 03:31.870 --> 03:33.330 Set state of undefined. 03:33.340 --> 03:39.640 So it's like this is undefined and in react whenever you write a function. 03:40.500 --> 03:46.350 Most of the time, especially when you call it from the render function here. 03:47.370 --> 03:50.010 If you want to use this in it. 03:50.800 --> 03:52.720 You need to bind it. 03:53.690 --> 04:01.160 The way to find it is to write this handle amount change and you write this handle amount change, not 04:01.160 --> 04:03.260 bind this. 04:05.930 --> 04:09.950 And I could go into a wild explanation about why this works. 04:09.950 --> 04:16.160 It has something to do with the context of this disappearing in JavaScript. 04:16.160 --> 04:18.440 I can't remember exactly how it works. 04:18.770 --> 04:21.170 I just don't to. 04:21.170 --> 04:27.320 Anytime I want to use this inside of a function, I usually have to bind it, which you can do inside 04:27.320 --> 04:28.820 the constructor, for example. 04:28.820 --> 04:29.660 Like this. 04:30.840 --> 04:32.370 So remember to bind it. 04:32.370 --> 04:33.360 And then. 04:34.520 --> 04:38.360 We can change the change, the amount value to anything we want to. 04:39.480 --> 04:43.200 This next thing is we should have a little submit button here. 04:43.200 --> 04:49.950 So when we submit it, it's going to get ten amounts of the traces we searched for. 04:56.880 --> 05:05.130 So remember on the form, we had this on submit that says that's making a call to this handle, submit. 05:06.830 --> 05:07.790 Let's do that. 05:07.790 --> 05:09.470 So let's write out that function. 05:09.470 --> 05:14.120 So first thing we'll do is to say event preventdefault. 05:14.120 --> 05:20.870 So that's going to prevent the form from refreshing our app to prevent it from just displaying the same 05:20.870 --> 05:22.070 results again. 05:23.700 --> 05:29.970 Now what we're going to do is we're going to call the API instead with this parameter, which is from 05:29.970 --> 05:31.890 the amount instead. 05:33.480 --> 05:37.110 So we will say, uh, fetch products. 05:42.760 --> 05:44.440 This dot fetch products. 05:45.210 --> 05:48.240 And we'll pass in the. 05:48.990 --> 05:51.930 This state amount. 05:53.310 --> 05:56.310 And we add the parameter amount here. 05:57.980 --> 06:01.970 And also remember to bind the function. 06:01.970 --> 06:04.430 So this handle submit. 06:05.610 --> 06:06.660 This handle. 06:06.660 --> 06:07.920 Submit dot. 06:07.960 --> 06:09.660 Bind this. 06:14.090 --> 06:16.130 And let's pass in. 06:16.130 --> 06:16.580 Let's. 06:16.580 --> 06:17.270 Let's. 06:19.420 --> 06:24.610 Turn this into a string little so backticks instead of the quotes. 06:25.480 --> 06:32.080 And then put in a dollar sign curly braces and pass in amount instead. 06:34.400 --> 06:37.910 And instead of having it at. 06:38.790 --> 06:39.480 Component. 06:39.480 --> 06:44.790 Well, we can do componentdidmount and just pass in this state amount here. 06:44.790 --> 06:49.260 So it starts out having the three amounts. 06:50.850 --> 06:55.680 Uh, unexpected use of event on line 31. 06:57.240 --> 07:05.370 That is because I don't have the event in my argument here for Handlesubmit, so just add that. 07:07.640 --> 07:10.980 So now it starts out with componentdidmount. 07:11.000 --> 07:14.390 It fetches the default amount of free. 07:15.750 --> 07:18.300 We can change the amount here. 07:18.300 --> 07:24.270 We still need a submit button, but we we have written out our handle submit. 07:25.550 --> 07:28.310 Let's add the input submit button. 07:30.720 --> 07:33.140 So input type submit. 07:34.640 --> 07:35.660 Submit. 07:36.460 --> 07:39.130 And value submit. 07:40.160 --> 07:41.180 Close attack. 07:42.370 --> 07:44.590 Now we have a submit button here. 07:44.590 --> 07:47.650 Let's change it to 12. 07:48.130 --> 07:48.910 And there we go. 07:48.910 --> 07:51.520 So now you can see there's more results now. 07:52.300 --> 07:55.900 So now we're getting 12 traces instead of just three. 07:55.930 --> 07:57.820 Let's change it again to 20. 07:58.640 --> 08:00.740 You can see it adds more products. 08:00.760 --> 08:01.240 Now. 08:01.970 --> 08:04.520 So now we can change the amount and. 08:05.710 --> 08:10.960 Now the next step is to also change the search query inside of this form. 08:10.960 --> 08:18.100 So we need to add another input type of text where we can type in the search query and pass it to our 08:18.760 --> 08:19.570 API.