1
00:00:00,120 --> 00:00:06,800
All right, folks, and we're almost done, we just need to set up a single cocktail component.

2
00:00:07,260 --> 00:00:15,720
So if we have our list, then of course we have option of navigating to the single cocktail page.

3
00:00:15,990 --> 00:00:23,460
And then once we navigate here, I would want to display info about that specific cocktail and we'll

4
00:00:23,460 --> 00:00:29,940
start somewhat simply where I would want to see whether I'm getting that idea.

5
00:00:30,240 --> 00:00:36,570
Because remember, in the cocktail, we use the link and then we go with force cocktail and then the

6
00:00:36,570 --> 00:00:36,940
idea.

7
00:00:37,320 --> 00:00:42,150
So let's navigate here the single cocktail and we're looking for use primes.

8
00:00:42,390 --> 00:00:48,280
That is the hook that reactor provides so we can access all of those unique powers.

9
00:00:48,750 --> 00:00:55,440
So let's start here by simply concentrating, because otherwise, if the idea, of course, is not there,

10
00:00:55,740 --> 00:00:57,140
well, we have bigger problems.

11
00:00:57,540 --> 00:00:59,660
So let's go with use primes and.

12
00:00:59,670 --> 00:01:00,090
All right.

13
00:01:00,090 --> 00:01:05,340
Or we would want to either cancel it or we can even display on a screen.

14
00:01:05,970 --> 00:01:09,810
So instead of this control, again, we're going to say, you know what?

15
00:01:09,990 --> 00:01:15,780
Show me that idea and no control in here whatsoever.

16
00:01:16,410 --> 00:01:22,740
And one thing that I mentioned, I'll try to set up everything in one video because I think that we

17
00:01:22,740 --> 00:01:28,680
should be already comfortable as far as working with API and everything else, but it might get a little

18
00:01:28,680 --> 00:01:29,220
lengthy.

19
00:01:29,430 --> 00:01:30,930
So my apologies for that.

20
00:01:31,300 --> 00:01:32,100
I'm going to go with home.

21
00:01:32,330 --> 00:01:35,100
Notice that was one idea and we have another one.

22
00:01:35,430 --> 00:01:37,980
And yep, it looks like our functionality works.

23
00:01:38,430 --> 00:01:42,060
And I decided to set up the whole functionality in this component.

24
00:01:42,450 --> 00:01:48,990
So I'm not going to be getting any value from the complex than just to showcase that.

25
00:01:49,350 --> 00:01:52,170
It is up to you, in my opinion.

26
00:01:52,380 --> 00:01:57,990
In this case, it just made a little bit more sense to separate these components instead of jamming

27
00:01:57,990 --> 00:02:01,240
everything into context and then deal with a massive file.

28
00:02:01,590 --> 00:02:05,250
So I'll set up here two state values.

29
00:02:05,640 --> 00:02:08,760
So we're going to have const one will be loading.

30
00:02:09,180 --> 00:02:12,110
And then, of course, we have set loading as well.

31
00:02:12,690 --> 00:02:19,920
One is equal to my react and then use state and I'll pass in false.

32
00:02:20,900 --> 00:02:27,770
And also, I would want to go with Consed and we'll set up a cocktail, so that is not a single cocktail

33
00:02:27,950 --> 00:02:31,060
cocktail and set cocktail.

34
00:02:31,700 --> 00:02:32,690
OK, awesome.

35
00:02:32,810 --> 00:02:38,350
That one is equal to react and then each state and will pass in.

36
00:02:38,350 --> 00:02:46,970
No, that is my default value and all right away would want to set up the usufruct where every time

37
00:02:46,970 --> 00:02:53,780
the component renders I would fetch the info about that specific cocktail.

38
00:02:54,170 --> 00:02:56,980
Now I already have the URL here.

39
00:02:57,590 --> 00:02:58,490
So there it is.

40
00:02:58,550 --> 00:03:00,260
That is my URL.

41
00:03:00,530 --> 00:03:08,270
And what I would want is to pass this into the correct, but also will have to do a little bit of magic

42
00:03:08,540 --> 00:03:09,990
where we combine the two.

43
00:03:10,490 --> 00:03:11,990
So let's set up our user.

44
00:03:12,440 --> 00:03:17,540
Then we go with react use fact we have a callback function.

45
00:03:17,780 --> 00:03:25,130
And then here I would just want to say that every time component roundish or the ID changes, but of

46
00:03:25,130 --> 00:03:32,090
course out of patch for that specific cocktail and then instead of setting up a separate function,

47
00:03:32,300 --> 00:03:37,760
I'll set that function inside of the user just to show you that of course that is possible.

48
00:03:38,030 --> 00:03:42,130
So I'm going to go set loading all right away, set it equal to true.

49
00:03:42,470 --> 00:03:48,370
And why don't we go nuts and use the good old function declaration again?

50
00:03:48,380 --> 00:03:49,070
Of course not.

51
00:03:49,070 --> 00:03:51,940
Is in the er quotation marks.

52
00:03:52,190 --> 00:03:59,930
No one's crazy for using the good old function declaration and we're going to go get a cocktail.

53
00:04:00,390 --> 00:04:02,720
That will be my name here.

54
00:04:03,140 --> 00:04:10,270
I will set up my parameter and that as far as the functional body again I will set up right away, just

55
00:04:10,640 --> 00:04:19,190
try and catch and the functionality will be somewhat similar where we go with const and then response

56
00:04:19,190 --> 00:04:20,960
is equal to avoid.

57
00:04:21,410 --> 00:04:23,060
Then we're patching.

58
00:04:23,300 --> 00:04:26,210
And of course I would want to set up those two values.

59
00:04:26,510 --> 00:04:28,220
Want to be that you are all on.

60
00:04:28,220 --> 00:04:30,280
The second one will be the idea.

61
00:04:30,740 --> 00:04:32,030
So I pass these two in.

62
00:04:33,180 --> 00:04:41,490
Then I'll get back my data, so CONSED and data and what's really interesting, that, again, we have

63
00:04:41,490 --> 00:04:46,240
the object and that is called Drunk's, so I'll show you that in a second.

64
00:04:46,620 --> 00:04:54,330
So we go here, we await and everyone is equal to your response and an objection.

65
00:04:54,600 --> 00:04:58,480
We invoke it and notice it will console log data.

66
00:04:58,950 --> 00:05:06,540
So first, of course, we need to navigate where we have the idea and on specked we should see in a

67
00:05:06,540 --> 00:05:07,610
console something.

68
00:05:08,100 --> 00:05:13,590
And of course, we don't see anything because I wasn't particularly bright.

69
00:05:14,070 --> 00:05:15,420
I didn't invoke this function.

70
00:05:15,720 --> 00:05:22,860
So at my function, get cocktail online right after I set up my function of I would want to invoke it

71
00:05:22,860 --> 00:05:23,290
as well.

72
00:05:23,670 --> 00:05:28,890
And now once we navigate to the page, we should see the object.

73
00:05:29,220 --> 00:05:35,340
And again, it's going to be a property of drinks and then it has an array of one.

74
00:05:36,220 --> 00:05:39,610
Then that is just how the API is set up.

75
00:05:39,640 --> 00:05:41,350
There's nothing I can do about it.

76
00:05:41,680 --> 00:05:47,070
So what we're going to do is check whether their drinks exist.

77
00:05:47,590 --> 00:05:54,280
If not, then, of course, we will set it back to know and we need to handle loading as well.

78
00:05:54,700 --> 00:05:57,220
So let's not forget there we have catch error.

79
00:05:57,700 --> 00:06:03,130
So I guess let's start here by setting up the error and then I'll deal with everything else.

80
00:06:03,460 --> 00:06:08,350
We have control log error and then set loading and then false.

81
00:06:08,620 --> 00:06:16,000
And then where we have the data, which is of course where I would want to check if data does exist.

82
00:06:16,340 --> 00:06:16,870
Awesome.

83
00:06:17,140 --> 00:06:22,500
I'll do one thing and then if it doesn't exist, well, then we'll do something else.

84
00:06:22,870 --> 00:06:29,170
And in this case, when we're talking about that, something else, what I would want is to go with

85
00:06:29,380 --> 00:06:33,760
set cocktail set cocktail and I'll set it back.

86
00:06:33,820 --> 00:06:39,870
You know, now, in either case, I would want to go with loading and set it back to force.

87
00:06:40,300 --> 00:06:46,990
So we have the now and not worry about, well, what if we actually get the data back?

88
00:06:47,290 --> 00:06:55,060
And again, we just have a giant object that we would need to the structure and then once we the structure

89
00:06:55,450 --> 00:06:57,800
will have to set up the ingredients as well.

90
00:06:58,180 --> 00:07:04,450
So one interesting thing that you'll notice about the API, if we're talking about one single cocktail,

91
00:07:04,810 --> 00:07:08,170
is notice how they have a bunch of ingredients.

92
00:07:08,590 --> 00:07:11,290
Now, in my case, I just went with five.

93
00:07:11,830 --> 00:07:15,920
And if you want to check whether there's more, of course, you can do that.

94
00:07:16,060 --> 00:07:19,930
In my case, I thought, you know, five is going to be enough.

95
00:07:19,930 --> 00:07:20,890
So we'll have to set up.

96
00:07:21,030 --> 00:07:21,340
Right.

97
00:07:21,580 --> 00:07:22,960
That holds that value.

98
00:07:23,260 --> 00:07:26,590
Now, remember, data drunk's is still all right.

99
00:07:27,160 --> 00:07:33,070
So, yes, I would want the structure, but just keep in mind that it is the first item in the array.

100
00:07:33,370 --> 00:07:35,500
So we go data drinks.

101
00:07:35,890 --> 00:07:41,110
That is our property is NRA and I'm looking for first item.

102
00:07:41,380 --> 00:07:46,200
And now in here I would want to grab my drink and we'll go.

103
00:07:46,210 --> 00:07:50,110
In this case, the earliest Rob were previously known as the context.

104
00:07:50,590 --> 00:07:53,320
We were grabbing the bar and then I was returning.

105
00:07:53,320 --> 00:07:54,820
And you object in this case?

106
00:07:54,820 --> 00:08:00,850
What I'm going to do is grab the property that still stays the same problem right away, give it an

107
00:08:00,850 --> 00:08:01,330
alias.

108
00:08:01,730 --> 00:08:04,960
Then again, we're looking for SDR drink.

109
00:08:05,470 --> 00:08:12,850
And I'm now now that one will be named image from now on that SDR.

110
00:08:12,880 --> 00:08:18,160
Again, we're looking for these guys, the alcoholic, one alcoholic.

111
00:08:18,760 --> 00:08:23,920
So hopefully I'm spelling them correctly because it's going to be annoying to find them later.

112
00:08:24,370 --> 00:08:26,170
So we're going to go with info here.

113
00:08:26,830 --> 00:08:29,080
Then we have the category.

114
00:08:29,470 --> 00:08:35,980
So comma, that's the AR category that want is equal to the category.

115
00:08:35,980 --> 00:08:37,600
That will be the new name.

116
00:08:38,080 --> 00:08:40,960
Then we have ETR Glass.

117
00:08:41,410 --> 00:08:47,290
Like I said, a little bit of knowing getting these properties as the hourglass is going to be equal

118
00:08:47,290 --> 00:08:47,920
to glass.

119
00:08:48,310 --> 00:08:50,560
And then we have SDR instructions.

120
00:08:52,490 --> 00:08:59,900
And that one will be equal to instructions so we can go here with directions, lecture, and then I

121
00:08:59,900 --> 00:09:08,270
would want to get those ingredients and essentially we go as they are and an ingredient, let me make

122
00:09:08,270 --> 00:09:15,950
sure that I spell correctly, because ingredient is something that gives me hassle every time we have

123
00:09:15,950 --> 00:09:16,610
ingredients.

124
00:09:16,610 --> 00:09:18,800
And then, like I said, I'm going to go with five of them.

125
00:09:18,800 --> 00:09:22,640
If you want less or more, it's up to you in here.

126
00:09:22,650 --> 00:09:26,930
I'm going to go with one, then two, three and four.

127
00:09:27,200 --> 00:09:30,610
And the only thing we're going to change are the numbers.

128
00:09:30,770 --> 00:09:32,210
So one, two, three, four.

129
00:09:32,730 --> 00:09:33,350
Let's go here.

130
00:09:33,350 --> 00:09:36,760
Two, three, four and five.

131
00:09:37,310 --> 00:09:44,450
Once we've got all of these things, then I would want to set up my ingredients array somewhere seconds

132
00:09:44,870 --> 00:09:48,140
and ingredients like so.

133
00:09:48,380 --> 00:09:53,000
And then there I'll just place my values for all the ingredients.

134
00:09:53,540 --> 00:09:56,660
So let's just copy them copy and paste.

135
00:09:56,960 --> 00:09:59,120
And of course we have our ingredients.

136
00:09:59,120 --> 00:09:59,410
All right.

137
00:09:59,810 --> 00:10:06,170
And then finally, let's set up that new cocktail and also use our set cocktail function.

138
00:10:06,590 --> 00:10:13,030
So I'm going to create a new variable just because I think it's a bit explicit of what we're doing.

139
00:10:13,520 --> 00:10:14,870
That one will be object.

140
00:10:14,870 --> 00:10:17,300
And here I have a name and an image.

141
00:10:17,300 --> 00:10:25,490
And of course, I'm using the S6 function where essentially if the property name matches the variable

142
00:10:25,490 --> 00:10:27,350
that holds the value, then of course I can skip it.

143
00:10:27,770 --> 00:10:32,060
That is ESX shorthand, that info and category.

144
00:10:33,250 --> 00:10:43,200
And glass, of course, the instructions and the ingredients, OK, we pass that into your cocktail.

145
00:10:43,420 --> 00:10:51,220
And then lastly, we have said cocktail and will pass in that new cocktail that should do it as far

146
00:10:51,220 --> 00:10:52,040
as the structure.

147
00:10:52,270 --> 00:10:54,560
That was definitely the annoying part.

148
00:10:54,880 --> 00:10:59,260
Now, let's start working on the return where at the moment we just have the idea.

149
00:10:59,710 --> 00:11:02,350
And I'll start by checking if we're loading.

150
00:11:02,980 --> 00:11:09,280
So if we are loading and of course, I would want to return my loading component, nothing new order.

151
00:11:09,670 --> 00:11:17,380
So loading component that will check whether we were able to get back the cocktail just in case there's

152
00:11:17,380 --> 00:11:18,490
some weird error.

153
00:11:18,820 --> 00:11:25,330
So I'm going to say, if the cocktail doesn't exist, meaning if it is null, then I would want to return

154
00:11:25,330 --> 00:11:31,530
it to and I'll say cocktail to display.

155
00:11:31,960 --> 00:11:40,210
And then lastly, we have a class as well as a class name and no one will be equal to a section title.

156
00:11:40,660 --> 00:11:48,160
Now, in this case, I think I'm going to go to the actual page and there is the moment I have Mitty,

157
00:11:48,310 --> 00:11:50,250
which means that we're not loading anymore.

158
00:11:50,500 --> 00:11:54,340
And of course, we have some cocktail to display.

159
00:11:55,090 --> 00:12:04,000
And now finally let the structure first, the properties from our object, and then let's place them

160
00:12:04,450 --> 00:12:04,870
where?

161
00:12:05,080 --> 00:12:08,440
Well, I would want to place them outside of my return.

162
00:12:08,440 --> 00:12:08,840
Correct.

163
00:12:09,100 --> 00:12:18,090
So we're going to go with CONSED and then we're looking for name again, image category in four, comma

164
00:12:18,130 --> 00:12:22,630
in four, then glass glass.

165
00:12:22,660 --> 00:12:31,180
And then we're looking for instructions, ingredients and all that is coming now from my state file.

166
00:12:31,510 --> 00:12:38,870
So I set it equal to the cocktail and then once I've got all of that, but I'm just going to go with

167
00:12:38,900 --> 00:12:42,130
return, I'm going to say that I'm returning a section.

168
00:12:43,180 --> 00:12:48,130
S. Let's start simply by displaying the name.

169
00:12:49,040 --> 00:12:55,970
So at the moment, we have had interview with already and I'm going to set it up and his name is equal

170
00:12:56,360 --> 00:13:04,450
to a section and then title and let's pass in that name just so we can see that we're getting that value.

171
00:13:04,910 --> 00:13:05,750
Let's say it.

172
00:13:05,930 --> 00:13:08,060
And there is now, of course, we have this name.

173
00:13:08,360 --> 00:13:15,460
So if I go back and if I check this Ayesh, I can see that I have a face as far as my details.

174
00:13:15,800 --> 00:13:16,310
Awesome.

175
00:13:16,760 --> 00:13:20,750
Now let's add a little bit of classes here as well for the section.

176
00:13:21,020 --> 00:13:26,840
I just wanted to check whether we're getting some values cocktail and then open section.

177
00:13:27,110 --> 00:13:30,110
Now, don't worry, we already in the homestretch.

178
00:13:30,410 --> 00:13:31,370
We're almost there.

179
00:13:31,850 --> 00:13:35,330
So you have the project ready in no time.

180
00:13:35,600 --> 00:13:40,850
I'll set up my link where the user still has the option to navigate back home.

181
00:13:41,300 --> 00:13:42,470
So class name.

182
00:13:42,980 --> 00:13:51,310
And then we go with BGN and then Bethanne primary as far as the value would just say back home.

183
00:13:51,650 --> 00:13:52,310
OK, awesome.

184
00:13:53,740 --> 00:14:00,100
And then we're just going to go with Dave and a class name, will we drink and this is will replace

185
00:14:00,400 --> 00:14:02,020
all that data.

186
00:14:02,680 --> 00:14:04,310
So we have a section title.

187
00:14:04,450 --> 00:14:05,640
We'll leave it the way it is.

188
00:14:05,650 --> 00:14:09,580
And right next to it, we're going to go there with a class of drunk.

189
00:14:10,180 --> 00:14:13,750
And we'll start with an image because there's going to be to come out.

190
00:14:14,020 --> 00:14:15,310
So we're looking for the image.

191
00:14:15,610 --> 00:14:19,930
And as far as the alternative, I'm just going to go with a name.

192
00:14:20,410 --> 00:14:22,990
So it's what we should see the image.

193
00:14:23,010 --> 00:14:24,460
And of course we do.

194
00:14:24,970 --> 00:14:32,680
Then we're going to have a div with a class of drinking for so they're instead of the drink and the

195
00:14:32,680 --> 00:14:34,900
class name is drink info.

196
00:14:35,290 --> 00:14:41,950
And in here there's going to be a paragraph, it's going to have a span and the class name will be drunk

197
00:14:42,190 --> 00:14:43,450
hyphen data.

198
00:14:43,990 --> 00:14:51,310
And instead of the span, I'm just going to go with name and I will add a column as well.

199
00:14:51,580 --> 00:14:57,160
And of course, right next to the span, I would want to take a look at the actual name.

200
00:14:57,670 --> 00:14:59,470
So it's safe and there it is.

201
00:14:59,500 --> 00:15:06,670
Now we have this set up and essentially we just need to copy and paste this one, two, three, four

202
00:15:06,850 --> 00:15:10,180
times and just change these values around.

203
00:15:10,190 --> 00:15:13,330
So one, two, three, four.

204
00:15:13,900 --> 00:15:17,770
And then, of course, the second one is category.

205
00:15:19,810 --> 00:15:22,900
And of course, the value is exactly the same subcategory.

206
00:15:23,750 --> 00:15:25,580
Then we have info.

207
00:15:26,770 --> 00:15:33,790
So you know what I'm going to use to process and discuss well or move here and that info, then we'll

208
00:15:33,790 --> 00:15:36,730
also have the glass and instructions.

209
00:15:36,730 --> 00:15:38,650
So to Cursus.

210
00:15:39,640 --> 00:15:42,640
Glass, and then we have instructions.

211
00:15:44,310 --> 00:15:52,690
And then once we've got all of this, we just need to go with our ingredients instructions here.

212
00:15:53,280 --> 00:15:57,870
Yep, all of those values came back, which is really, really nice.

213
00:15:58,320 --> 00:16:01,720
And we just need to iterate over our ingredients.

214
00:16:01,750 --> 00:16:02,120
All right.

215
00:16:02,550 --> 00:16:04,470
So we still have the paragraph.

216
00:16:05,130 --> 00:16:08,910
We'll have some spane out of class name here.

217
00:16:09,180 --> 00:16:12,480
And that one will still be drink Darah, drink data.

218
00:16:12,990 --> 00:16:21,660
And then let's add here the name ingredients and common course and then let's iterate over our ingredients.

219
00:16:21,710 --> 00:16:22,010
All right.

220
00:16:22,410 --> 00:16:30,360
So right next to this pan, I'm just going to go with ingredients or a map and the ihram and the index

221
00:16:30,630 --> 00:16:31,710
since I have the list.

222
00:16:32,600 --> 00:16:37,640
And as far as the return, I'm just going to say, you know what, get me the item.

223
00:16:37,640 --> 00:16:44,450
If it's there, if it's not returned now, because keep in mind, since I'm grabbing here, ingredient

224
00:16:44,450 --> 00:16:47,060
number one, number two, number three, four and five.

225
00:16:47,450 --> 00:16:49,940
Notice how some of them don't have the five.

226
00:16:50,210 --> 00:16:51,910
Maybe some of them won't have the four.

227
00:16:52,340 --> 00:16:57,700
So I also want to check in array whether some of the items are not.

228
00:16:58,250 --> 00:17:03,760
So if it is now, then of course, I wouldn't want to return that particular item.

229
00:17:03,980 --> 00:17:04,670
So I'm going to go.

230
00:17:04,670 --> 00:17:06,800
If the item is there, then awesome.

231
00:17:06,800 --> 00:17:14,150
Then I'm returning span and I'll add a key and I'll set it equal to the index and inside of it I'll

232
00:17:14,150 --> 00:17:15,860
place my item.

233
00:17:16,220 --> 00:17:20,690
Now, if the item is no, then I won't return anything.

234
00:17:21,230 --> 00:17:25,450
So I'll just show the ingredients that I have.

235
00:17:25,820 --> 00:17:31,260
And once we navigate to the bigger screen, we should have our project.

236
00:17:31,580 --> 00:17:35,730
Now, the only thing that is missing is this huge callback.

237
00:17:36,050 --> 00:17:40,130
Now I'll show you where it is missing and why we should add it.

238
00:17:40,410 --> 00:17:41,530
So it's now we get here.

239
00:17:42,050 --> 00:17:44,720
And then, of course, I'll go back to the homepage.

240
00:17:45,020 --> 00:17:47,690
I can have my cocktails and search for them.

241
00:17:47,690 --> 00:17:48,470
I have loading.

242
00:17:48,740 --> 00:17:55,700
If I don't have any cocktails, I display the text and if I search for a specific cocktail, I get this

243
00:17:55,700 --> 00:17:55,940
one.

244
00:17:56,270 --> 00:18:03,340
And there is I have info about the cocktail and I only display the ingredients that the cocktail has.

245
00:18:03,680 --> 00:18:05,210
So what's up with this one?

246
00:18:05,210 --> 00:18:11,510
If we check out right now our council, we see that there's a warning.

247
00:18:11,930 --> 00:18:18,700
It says react OK, use effect, has a missing dependency, fetch drinks nowadays.

248
00:18:18,860 --> 00:18:20,570
That is in the context.

249
00:18:21,050 --> 00:18:27,890
So if we navigate to the context, we should say that, of course, we have four drinks.

250
00:18:28,190 --> 00:18:29,990
That is our function.

251
00:18:30,410 --> 00:18:32,420
And then react is complaining.

252
00:18:32,420 --> 00:18:38,720
Hey, listen, you did not add this as dependency, but since we have covered use callback function,

253
00:18:39,180 --> 00:18:49,490
we know that if I will add this fetch drinks as my dependency over here, I am going to get a infinite

254
00:18:49,490 --> 00:18:49,880
loop.

255
00:18:50,300 --> 00:18:50,750
Why?

256
00:18:51,110 --> 00:18:56,780
Because this function, the way it's set up right now, gets created every time.

257
00:18:57,230 --> 00:19:03,230
And then inside of this function, I'm also changing the state value, correct the cocktails.

258
00:19:03,680 --> 00:19:06,350
So we're getting that infinite loop.

259
00:19:06,800 --> 00:19:15,230
And in order to avoid that and in order to also avoid that warning, we simply set up the use callback.

260
00:19:15,530 --> 00:19:23,690
So we go here with years and then call back hook, where essentially we're saying you're not only if

261
00:19:23,690 --> 00:19:31,310
something changes about this function, it's essentially only if the search term changes then created

262
00:19:31,310 --> 00:19:32,090
from the scratch.

263
00:19:32,690 --> 00:19:35,150
If it doesn't, then don't create from scratch.

264
00:19:35,150 --> 00:19:38,090
And then, of course, we can add a few dependencies.

265
00:19:38,510 --> 00:19:39,890
So we're going to use callback.

266
00:19:40,220 --> 00:19:43,220
I wrap my function like so.

267
00:19:43,400 --> 00:19:50,000
And I also want to set it up that every time the search term changes, I would want to create from scratch.

268
00:19:50,000 --> 00:19:51,010
Why won't?

269
00:19:51,080 --> 00:19:53,090
Because we're passing in the search term.

270
00:19:53,540 --> 00:19:58,490
Otherwise you'll always have this a which essentially is that default value.

271
00:19:58,730 --> 00:19:59,810
So we save here.

272
00:19:59,990 --> 00:20:08,390
And then of course, I can go to search term and we can add that fetch drinks, fetch drinks as our

273
00:20:08,390 --> 00:20:09,020
dependency.

274
00:20:09,110 --> 00:20:09,800
We go back.

275
00:20:10,100 --> 00:20:12,260
We shouldn't have any warning.

276
00:20:12,560 --> 00:20:19,520
But what's also really nice that we're not getting that infinite loop of that is our project that should

277
00:20:19,560 --> 00:20:21,230
conclude all the basic project.

278
00:20:21,560 --> 00:20:29,660
Hopefully everyone enjoy the project and I hope to see you in the next project, the API project, and

279
00:20:29,660 --> 00:20:33,500
bigger and complex projects that we're going to build during the course.