1
00:00:02,660 --> 00:00:08,660
So how can we get information about the category we clicked on, we selected from this category screen

2
00:00:08,660 --> 00:00:15,240
to the category meals screen? Well on the categories screen where we navigate to category meals,

3
00:00:15,440 --> 00:00:16,870
for this navigation action

4
00:00:16,880 --> 00:00:21,930
besides the route name, we can also pass the params.

5
00:00:21,950 --> 00:00:29,510
That's another key this object you passed to navigate accepts and this takes itself an object of key-value

6
00:00:29,510 --> 00:00:35,060
pairs, of any key-value pairs and as many key-value pairs as you want.

7
00:00:35,060 --> 00:00:40,980
So these are simply parameters, extra data you're passing to the new screen which is being loaded.

8
00:00:41,330 --> 00:00:46,760
Now there, you could set up a parameter named category ID and the name is totally up to you, that could

9
00:00:46,760 --> 00:00:47,880
be just ID,

10
00:00:47,930 --> 00:00:54,590
cid or my hobby, whatever you're building and whatever data you need to forward, here we're forwarding

11
00:00:54,590 --> 00:00:57,640
a category ID hence I will name it such.

12
00:00:57,650 --> 00:01:01,410
This now should be in our scenario here of course,

13
00:01:01,410 --> 00:01:03,980
the ID of the category we tapped on.

14
00:01:03,980 --> 00:01:07,650
Now of course, we're getting our item data here for each grid item which is rendered,

15
00:01:07,670 --> 00:01:12,480
this holds the item and this has a title, a color and well, an ID,

16
00:01:12,650 --> 00:01:16,780
so the category ID is itemData.item.id.

17
00:01:17,180 --> 00:01:23,430
Now we're forwarding that ID to the new screen which is being loaded and

18
00:01:23,630 --> 00:01:26,210
that of course is the important thing here,

19
00:01:26,210 --> 00:01:34,620
this allows us to then use that data in that new screen. How? Well, let's go there,

20
00:01:34,650 --> 00:01:39,550
let's go to the category meals screen and see how we can extract that parameter.

21
00:01:39,600 --> 00:01:41,400
We know that we'll get one,

22
00:01:41,400 --> 00:01:43,990
how can we now get access to it?

23
00:01:44,250 --> 00:01:46,740
For this, we can again use props navigation,

24
00:01:46,740 --> 00:01:52,350
so this special prop we're getting because this component here is getting loaded with the help of a React

25
00:01:52,350 --> 00:01:58,860
navigation navigator and on navigation, we don't just have navigate and push and so on,

26
00:01:58,860 --> 00:02:07,410
we also have getParam, a method provided to extract a parameter we receive. getParam takes a string

27
00:02:07,410 --> 00:02:12,450
with the name of the parameter we want to extract and of course, that should be the name you chose here

28
00:02:12,840 --> 00:02:15,590
as a key in that params object.

29
00:02:15,600 --> 00:02:21,330
So here, I added category ID, hence that's the name I want to use here.

30
00:02:21,330 --> 00:02:29,160
This will give me the cat ID, that category ID, This will give me the value we're storing here on

31
00:02:29,160 --> 00:02:30,350
that key name, in this case,

32
00:02:30,360 --> 00:02:30,960
that's the ID,

33
00:02:30,960 --> 00:02:32,700
so that's the value

34
00:02:32,700 --> 00:02:36,360
we're extracting for category ID in the category meals screen.

35
00:02:36,360 --> 00:02:44,100
So now we have the cat ID and we can now use that to of course get access to all the meals that fit

36
00:02:44,100 --> 00:02:45,120
into this category,

37
00:02:45,120 --> 00:02:51,360
right now we have no meals so we'll have to postpone this but at least we can also use this to get our

38
00:02:51,360 --> 00:02:58,920
category title and use that here and for that, all we need to do of course is we need to import categories,

39
00:02:58,920 --> 00:03:08,220
so our categories array here from data/dummy-data and we have the ID, we have an array of categories, of

40
00:03:08,220 --> 00:03:15,600
course we can find our selected category or whatever you want to name it by having a look at categories

41
00:03:15,960 --> 00:03:21,950
and there, we can use find which takes a function which it executes on every element in the array,

42
00:03:21,950 --> 00:03:27,830
so on every category and gives us the item where this function returns true which should be the case

43
00:03:27,830 --> 00:03:33,700
if the ID for the category we're looking at matches the cat ID we're retrieving from our params.

44
00:03:33,800 --> 00:03:35,740
This gives us the selected category

45
00:03:35,750 --> 00:03:42,010
and to prove that this works, I'll output it here in a text component, I'll output selectedCategory.title

46
00:03:42,020 --> 00:03:53,370
here. Now with that, if we go back and we navigate to that category, we see Italian here right above

47
00:03:53,370 --> 00:03:56,280
my buttons, we see quick and easy now,

48
00:03:56,430 --> 00:04:01,310
so that is working. This is how we're passing data forward and how we're extracting it

49
00:04:01,410 --> 00:04:07,710
and of course you can pass multiple parameters, as many as you need and parameters don't have to be IDs,

50
00:04:08,010 --> 00:04:15,270
you could pass objects, you could pass text, numbers and arrays, whatever data you need to pass, you can

51
00:04:15,270 --> 00:04:22,620
pass. You might notice however that of course with that, we're able to use our category here in our screen

52
00:04:23,040 --> 00:04:25,420
but we want to use it here in the header.

53
00:04:25,420 --> 00:04:27,030
Well let's tackle that in the next lecture.