1
00:00:02,670 --> 00:00:08,610
So we want to find the meals that fit into the category we selected, therefore actually in the category

2
00:00:08,610 --> 00:00:09,660
meal screen component,

3
00:00:09,660 --> 00:00:15,000
we're not really interested in the selected category but we're highly interested in the meals that belong

4
00:00:15,000 --> 00:00:17,150
to that category. Now

5
00:00:17,150 --> 00:00:22,910
for that, we can first of all import our meals array because that holds all possible meals we have

6
00:00:22,910 --> 00:00:28,550
and now we want to filter out those which actually have the category ID we selected in there, category

7
00:00:28,550 --> 00:00:35,480
ID array which every meal has. You will see in the dummy data that every meal has this array of category

8
00:00:35,480 --> 00:00:36,680
IDs to which it belongs

9
00:00:36,680 --> 00:00:39,320
so that's what we'll use for filtering.

10
00:00:39,320 --> 00:00:46,010
So in the category meals screen, we want to find the meals that belong to that category we selected and

11
00:00:46,070 --> 00:00:49,850
I'll store them in a constant named displayed meals,

12
00:00:49,880 --> 00:00:54,230
the name is of course up to you and there, I'll look at my meals,

13
00:00:54,230 --> 00:01:00,260
so that's the entire meals array and use the filter method Javascript offers to run a function on every

14
00:01:00,260 --> 00:01:05,840
meal in that array where we get the meal automatically as an argument and where we have to return true

15
00:01:06,110 --> 00:01:10,740
if it's one of the meals that we want to keep or false if it's one of the meals we don't want to keep

16
00:01:10,790 --> 00:01:17,510
and we want to keep all meals where the category IDs property of that meal we're looking at contains

17
00:01:17,510 --> 00:01:19,340
the category ID we selected here.

18
00:01:20,090 --> 00:01:29,990
So here, I will return true if meal category IDs index of which is also a Javascript method, the cat

19
00:01:30,020 --> 00:01:36,470
ID we extracted from the route params, if that is greater or equal than zero because that will be minus

20
00:01:36,470 --> 00:01:43,490
one if the category ID is not part of the category IDs, if it's zero or greater, then we know that

21
00:01:43,490 --> 00:01:50,540
this meal has this category ID in its category IDs array and this will give us an

22
00:01:50,540 --> 00:01:53,690
array of displayed meals for that selected category,

23
00:01:53,690 --> 00:01:57,710
now that's what we want output here. Now for this,

24
00:01:57,710 --> 00:02:04,280
I have my view here and in that view, I again want to render a list and now it will be a list and not

25
00:02:04,280 --> 00:02:11,360
a grid, so instead of the button which we'll not need anymore, I'll import FlatList here and then render

26
00:02:11,360 --> 00:02:13,590
my FlatList like this

27
00:02:13,850 --> 00:02:19,910
and now there the data I feed in of course is my displayed meals array because that are the meals

28
00:02:19,970 --> 00:02:22,490
I want to render to the screen.

29
00:02:22,700 --> 00:02:30,140
Now as mentioned before, modern versions of React Native automatically look for ID field in a meal to use

30
00:02:30,140 --> 00:02:37,970
that as a key in FlatList, if you're using an older version or also just to practice this again, I'll add a key

31
00:02:37,970 --> 00:02:44,150
extractor here where I get the item and the index and I know that on each meal, I'll have an ID field because

32
00:02:44,150 --> 00:02:48,500
that's what we set up here in the model and that will be what I use as a key in my list, so I'll use

33
00:02:48,500 --> 00:02:50,570
that here in key extractor.

34
00:02:50,570 --> 00:02:56,060
More important than the key extractor however is render item which of course should point at a function

35
00:02:56,090 --> 00:03:05,710
that we use to render a single item in that list and there I'll, just as before, set up a new function,

36
00:03:05,880 --> 00:03:15,460
I'll do it here inside of my component function so that I can use props and I'll name this render

37
00:03:15,520 --> 00:03:21,310
meal item, the name is totally up to you. In there, I will get some item data, I know this because the flat

38
00:03:21,310 --> 00:03:27,940
list passes us as item data object into this function and in there, we have to return a jsx code that

39
00:03:27,940 --> 00:03:34,810
should render a meal item and there I'll render a view and for the moment, then simply a text component

40
00:03:34,810 --> 00:03:43,390
in there where I want to output itemData.item.title, so just the name of the meal for now, later

41
00:03:43,390 --> 00:03:49,420
we'll also display the image there but for now, this will do and now render meal item is what I use here

42
00:03:49,660 --> 00:04:00,240
as the function render item should point at. This should render a basic list of meals, let's see whether

43
00:04:00,240 --> 00:04:07,560
that works. If we save this and we now select let's say Italian, I see spaghetti with tomato sauce, doesn't

44
00:04:07,560 --> 00:04:08,810
look too bad.

45
00:04:08,880 --> 00:04:15,120
Quick and Easy, we see four meals and hamburgers, we see the classic hamburger, light and lovely, we see

46
00:04:15,120 --> 00:04:21,640
two recipes, so that seems to work, looks like recipes are selected based on the category we chose and

47
00:04:21,660 --> 00:04:28,500
that's of course great. Now it's again time to work a little bit on the styling because I'm not sure

48
00:04:28,500 --> 00:04:31,170
about you but I think we can improve that a little bit.