WEBVTT

00:03.130 --> 00:06.910
Now let's put in a default search term.

00:09.190 --> 00:10.930
Of redress.

00:13.240 --> 00:15.490
And then pass in the.

00:16.330 --> 00:18.640
This state search term.

00:19.470 --> 00:22.620
To fetch products at Componentdidmount.

00:24.880 --> 00:25.930
And then.

00:28.210 --> 00:30.530
Pass into variables here.

00:30.550 --> 00:31.540
Dollar sign.

00:33.280 --> 00:37.000
I also need to add it to the arguments of fetch products here.

00:37.450 --> 00:39.970
So search term.

00:41.470 --> 00:44.000
And then have it inside here.

00:44.120 --> 00:45.440
Search term.

00:47.560 --> 00:55.090
So now we start up the query again just with our state instead.

00:56.240 --> 01:02.000
And now we need to add in the input type text.

01:04.110 --> 01:06.750
Input type text.

01:08.480 --> 01:12.290
Value we can set to this state.

01:12.920 --> 01:14.240
Search term.

01:15.640 --> 01:18.760
We also need to write a onchange function for this.

01:18.760 --> 01:24.160
So this handle search term change.

01:25.320 --> 01:26.970
And in the tag.

01:28.350 --> 01:33.030
So let's write the handle search term change.

01:34.110 --> 01:36.420
Again taking in the event.

01:37.540 --> 01:39.310
And we'll set the state.

01:40.750 --> 01:41.920
Of search term.

01:42.900 --> 01:46.920
To be equal to event target value.

01:51.720 --> 02:00.030
Now also remember to bind it because we're using this inside it, this handle amount change.

02:01.080 --> 02:01.920
Sorry.

02:03.230 --> 02:04.730
Uh, this handle.

02:07.190 --> 02:07.790
Search.

02:08.150 --> 02:08.810
Change.

02:09.890 --> 02:10.520
Yeah.

02:10.520 --> 02:14.420
This handle search term change.

02:15.390 --> 02:15.930
Oops.

02:18.000 --> 02:25.410
Dot bind pass in this Now it's binding this so we can use this set state inside it.

02:26.190 --> 02:27.180
Now, let's see.

02:27.180 --> 02:32.220
So it starts out with red dress and we can try and change it to blue dress.

02:33.240 --> 02:36.030
Then let's try and make the call.

02:38.830 --> 02:46.000
And it looks like it is not passing in the correct search term because they don't look like dresses,

02:46.000 --> 02:46.960
these ones.

02:47.350 --> 02:51.130
I think this is just a default search result it's giving us.

02:52.260 --> 02:53.560
And let's see.

02:53.560 --> 02:54.070
Let's see.

02:54.070 --> 02:55.000
Let's see.

02:56.000 --> 02:57.170
Yeah, of course.

02:57.170 --> 03:05.840
It's because inside of our handle submit function, we need to also pass into this state of search term.

03:06.620 --> 03:09.290
So now it should be working fine.

03:09.500 --> 03:10.940
Let's search for.

03:11.850 --> 03:12.960
Blue shorts.

03:15.180 --> 03:16.190
And there we go.

03:16.200 --> 03:19.070
We get some nice uh oh.

03:19.080 --> 03:22.290
I don't know if that's shorts, but we get some results.

03:22.320 --> 03:27.870
Now let's try and change some things up and we can search for shoes.

03:29.940 --> 03:32.310
And we get lots of lots of shoes.

03:37.100 --> 03:38.770
So people.

03:38.780 --> 03:40.130
That is how.

03:41.320 --> 03:51.640
You reverse engineer a site and find a API and also how you build a backend that is taking advantage

03:51.640 --> 03:53.140
of this API.

03:53.440 --> 03:59.770
And again, how you can build a front end application that can display this.

04:01.310 --> 04:03.290
These this result.

04:04.050 --> 04:04.860
And.

04:05.770 --> 04:13.930
Totally avoiding writing any kind of scraper for your web scraping.

04:14.620 --> 04:21.070
Basically, you avoid writing any kind of web scraping, so it's going to save you a lot of time.

04:22.450 --> 04:28.690
I hope you got something out of this tutorial and I'll see you next time and any questions you have,

04:28.690 --> 04:30.460
feel free to message me.