1
00:00:00,910 --> 00:00:04,290
After a lot of work we finally got all this event handler stuff fixed up.

2
00:00:04,330 --> 00:00:08,070
So now at this point in time we've got our term our search room right here.

3
00:00:08,170 --> 00:00:15,280
Now we know that if a user enters in some amount of text and hits enter We want to initiate a PI request

4
00:00:15,490 --> 00:00:18,580
and intend to go find some images that are matching whatever we enter here.

5
00:00:18,580 --> 00:00:23,650
Be it like cars or plants or trees or flowers or whatever it is.

6
00:00:23,740 --> 00:00:28,390
The first thing we need to think about here is where we are going to write some code to actually do

7
00:00:28,390 --> 00:00:29,760
that API request.

8
00:00:29,770 --> 00:00:33,940
Remember we haven't even spoken about the service we're going to use to fetch any images yet.

9
00:00:33,970 --> 00:00:35,010
We'll get to that in just a second.

10
00:00:35,020 --> 00:00:40,720
But before we do we need to think about where we are going to actually initiate the attempt to get some

11
00:00:40,720 --> 00:00:41,610
images.

12
00:00:41,980 --> 00:00:47,380
Well when I look at the search bar component I really start to realize that the only purpose of the

13
00:00:47,380 --> 00:00:53,150
search bar is to allow a user to type in some input and then submitted by hitting enter.

14
00:00:53,200 --> 00:00:59,560
It's not really the search bars job to take this term and then use it to make an API request or to find

15
00:00:59,560 --> 00:01:00,480
some images.

16
00:01:00,730 --> 00:01:06,840
Instead I would say that that would really be the job or the purpose of the app component instead.

17
00:01:06,880 --> 00:01:11,980
So I think that rather than having the search bar doing any API requests or anything like that I think

18
00:01:11,980 --> 00:01:18,610
that we need to somehow take the search term and pass it back up to the app component and then the app

19
00:01:18,610 --> 00:01:25,300
component can be the one in charge of actually making an API request and somehow getting a list of images.

20
00:01:25,870 --> 00:01:30,220
So in this section we're going to figure out how we can somehow get that search term from our search

21
00:01:30,220 --> 00:01:33,130
bar back up to the app component.

22
00:01:33,130 --> 00:01:36,170
Now this is going to be definitely a new thing for us to learn.

23
00:01:36,950 --> 00:01:42,470
At this point we've only learned how to communicate between components through the prop system and remember

24
00:01:42,680 --> 00:01:48,420
the prop system only allows us to pass information from the parent component down to a child.

25
00:01:48,620 --> 00:01:51,080
So we say props go down this hierarchy.

26
00:01:51,080 --> 00:01:56,220
We can only pass information from the app component down to search bar through.

27
00:01:56,630 --> 00:01:59,060
But we can use a little trick.

28
00:01:59,270 --> 00:02:00,530
So here's what we're going to do.

29
00:02:01,570 --> 00:02:05,530
We're going to this is the same diagram I just reorganized it a little bit.

30
00:02:05,650 --> 00:02:10,900
We're going to turn the app component into a class based component and then in it we're going to define

31
00:02:10,930 --> 00:02:14,450
a callback method called on search submit.

32
00:02:14,560 --> 00:02:20,440
Then whenever the app component decides to show our search bar it's going to pass that callback or that

33
00:02:20,440 --> 00:02:26,890
on search submit as a callback method or as a prop down to the search bar and the search bar is going

34
00:02:26,890 --> 00:02:31,990
to hold onto that method then any time that the user submits our form.

35
00:02:32,070 --> 00:02:35,390
It's like when these are Smit's the form it's going to take that callback.

36
00:02:35,390 --> 00:02:39,890
It was given and it's going to call that callback with whatever the search term was.

37
00:02:40,020 --> 00:02:44,910
And so it's going to invoke the callback inside the app component with whatever search term the user

38
00:02:44,910 --> 00:02:45,930
just entered.

39
00:02:46,290 --> 00:02:52,350
Essentially this entire system that I'm describing right here is very similar if not identical to the

40
00:02:52,350 --> 00:02:57,840
on forms submit and the On Change event handlers that we've already put together for the form and the

41
00:02:57,840 --> 00:03:02,940
input we are passing a callback function down into these other components.

42
00:03:02,940 --> 00:03:08,010
And then whenever something happens inside those components they are going to call our callback functions

43
00:03:08,190 --> 00:03:13,290
to give our search bar a little notice that hey something just happened and you need to deal with the

44
00:03:13,290 --> 00:03:15,540
CVN event that just occurred.

45
00:03:16,080 --> 00:03:21,360
So in truth this might seem like a new thing but we've kind of technically already done it twice already.

46
00:03:21,360 --> 00:03:21,680
All right.

47
00:03:21,690 --> 00:03:27,330
So in order to do this the first thing we have to do is refactor our app into a class based component

48
00:03:27,600 --> 00:03:32,250
so that it can have some function that can take and pass down into the search bar.

49
00:03:32,250 --> 00:03:33,430
So to take a quick pause right here.

50
00:03:33,480 --> 00:03:35,830
When we come back the next section will start refactoring our.