1
00:00:00,700 --> 00:00:05,180
In the last section we ran into the same issue that we ran into previously on this application.

2
00:00:05,270 --> 00:00:11,000
So we need to fix the context or the value of this side of the on search submit callback by binding

3
00:00:11,000 --> 00:00:16,310
it by assigning it as a arrow function to the search Samit property right here inside the app class

4
00:00:16,580 --> 00:00:20,210
or by wrapping the callback down here inside of an arrow function.

5
00:00:20,210 --> 00:00:25,910
Now before I do one of those I'm going to remove this little silly prop I added in there like so and

6
00:00:26,090 --> 00:00:31,940
I'm going to put this back on a single line area and then one last thing I'll do is I'll remove the

7
00:00:31,940 --> 00:00:36,230
console log of this because after we fix this issue we're not going to need to know what the value of

8
00:00:36,230 --> 00:00:37,330
this is inside there.

9
00:00:37,400 --> 00:00:38,570
Well no it's just fine.

10
00:00:38,830 --> 00:00:39,070
OK.

11
00:00:39,080 --> 00:00:44,000
So to fix the context of this inside this function we're going to do the same thing that we did back

12
00:00:44,030 --> 00:00:45,620
inside of the search bar.

13
00:00:45,650 --> 00:00:51,050
We're going to turn that function into an arrow function and then assign it to whatever our function

14
00:00:51,080 --> 00:00:53,730
or a method name is.

15
00:00:53,740 --> 00:00:57,610
Now this time around it's going to be just slightly more different because we have to include the async

16
00:00:57,760 --> 00:00:59,080
keyword in here.

17
00:00:59,380 --> 00:01:03,520
I mean first begin by removing the async cured just because it's going to be a little bit easier to

18
00:01:03,520 --> 00:01:05,580
do this refactor without it in it's way.

19
00:01:05,590 --> 00:01:09,940
And then I'm going to turn this thing into an arrow function just as we did previously.

20
00:01:09,940 --> 00:01:17,290
So I will say on search submit equals the argument term and then I'll put my arrow right after it.

21
00:01:17,290 --> 00:01:19,460
And now to get the async keyword back in here.

22
00:01:19,480 --> 00:01:24,760
Because if we don't include the async keyword this a weight is going to throw an error right there.

23
00:01:24,760 --> 00:01:30,320
I'm going to find right before that argument list and I'll put in the async keyword like so.

24
00:01:31,850 --> 00:01:37,960
So that right there is how we define a zero function market as a sink and assign it to a instance property.

25
00:01:39,010 --> 00:01:45,490
All right so now we build a save this all flip back over refresh already kicked in so I could put my

26
00:01:45,490 --> 00:01:46,560
search term right in here.

27
00:01:46,570 --> 00:01:50,570
I'll say cars and you'll see fountain images.

28
00:01:50,770 --> 00:01:51,660
Perfect.

29
00:01:52,120 --> 00:01:53,080
OK so that's pretty much it.

30
00:01:53,080 --> 00:01:56,350
That is data fetching inside of a re-act application.

31
00:01:57,100 --> 00:01:59,360
Now what we have here definitely works.

32
00:01:59,410 --> 00:02:04,080
But there is a little bit of code cleanup that we can do around the X-Post code that you see right here.

33
00:02:04,270 --> 00:02:05,800
So we're going to take a quick pause right now.

34
00:02:05,830 --> 00:02:10,270
When we come back the next section we're going to clean up this Actio stuff just a little bit to avoid

35
00:02:10,270 --> 00:02:14,650
our app component from having so much configuration related stuff inside of it.

36
00:02:14,650 --> 00:02:16,480
So quick pause and I'll see you in just a minute.