1
00:00:02,170 --> 00:00:10,150
How can we solve that problem that we here need to find a specific meal and we can't really use our

2
00:00:10,600 --> 00:00:13,600
selector here in the navigation options?

3
00:00:13,600 --> 00:00:19,960
Now there are two possible fixes - fix number one is that we again use the good old params to communicate

4
00:00:19,990 --> 00:00:22,190
between component and navigation options

5
00:00:22,210 --> 00:00:29,470
as I showed it in the navigation module. Here in the component, we are loading our meal, so of course here

6
00:00:29,470 --> 00:00:37,310
we can use props navigation set params and now set the params to a new value here and now we can use

7
00:00:37,310 --> 00:00:43,300
set params to forward the selected meal or its title to the header and whatever you set here is params

8
00:00:43,300 --> 00:00:48,340
by the way will be merged with the existing params, so this will not override them, so you'll not override

9
00:00:48,340 --> 00:00:52,630
your mealId which you're retrieving here, that will still be there, you're just adding something new,

10
00:00:52,870 --> 00:00:56,840
you're only overriding a param if it already exists in the params.

11
00:00:56,920 --> 00:01:04,030
So here, we could add the meal title key and set this to selected meal.title.

12
00:01:04,050 --> 00:01:13,120
Now this means that I sent these params to my header when this component renders in the end.

13
00:01:15,800 --> 00:01:20,270
Now since this will change props, we would typically end up in an infinite loop,

14
00:01:20,270 --> 00:01:24,710
so to break this, we'll use use effect here

15
00:01:24,800 --> 00:01:29,780
as I showed it in the navigation module and actually do that inside of use effect.

16
00:01:29,780 --> 00:01:32,690
So here we can use use effect

17
00:01:35,230 --> 00:01:41,430
and as a dependency, I'll specify an empty array for now and then set params here inside of the use effect

18
00:01:41,440 --> 00:01:42,320
function

19
00:01:42,520 --> 00:01:47,290
and I won't have an empty array here, instead my dependency here is my selected meal.

20
00:01:47,290 --> 00:01:55,150
When that changes, I want to forward the new information to the header. Now we'll see if that works,

21
00:01:55,150 --> 00:01:56,250
let's go to the header

22
00:01:56,350 --> 00:01:59,050
and there we can now retrieve that from the parameters.

23
00:01:59,050 --> 00:02:01,720
So here I have my meal title,

24
00:02:02,080 --> 00:02:09,240
I can get this with navigationData.navigation.getParam meal title,

25
00:02:09,240 --> 00:02:12,660
that was the name I chose when setting the params here.

26
00:02:19,700 --> 00:02:21,590
Now with the meal title selected here,

27
00:02:21,590 --> 00:02:28,190
we can set header title to that meal title and comment this line out because it won't work anyway

28
00:02:28,200 --> 00:02:30,140
and let's give this a try.

29
00:02:30,140 --> 00:02:35,660
Let's save this and go to the detail page and whilst this works,

30
00:02:35,660 --> 00:02:40,410
you'll see a problem. When this loads, initially there is no title and this only pops in

31
00:02:40,430 --> 00:02:42,140
after a while.

32
00:02:42,140 --> 00:02:47,350
So only after this is fully loaded, we see that title pop in

33
00:02:47,360 --> 00:02:49,530
which isn't too beautiful

34
00:02:49,790 --> 00:02:55,340
and the reason for that simply is that our logic here works but since use effect runs after the component

35
00:02:55,340 --> 00:03:00,770
has been rendered for the first time, we wait for the component to render for the first time until we

36
00:03:00,770 --> 00:03:06,980
send the params to the title and that means that when this transition is still playing and the rendering

37
00:03:06,980 --> 00:03:12,400
hasn't been fully finished, we're not really showing that title.

38
00:03:12,680 --> 00:03:15,630
That's why this might not be the optimal solution here

39
00:03:15,650 --> 00:03:20,960
and I will comment this out. A better solution here, as cheap as it might sound

40
00:03:21,060 --> 00:03:26,310
but that's also a solution which you can often use, is that you simply forward the title which we'll

41
00:03:26,310 --> 00:03:31,800
need here from inside the component you're coming from, so that you load it when you are in the component

42
00:03:31,800 --> 00:03:36,510
that will go to this component and you send it to this component before it's loaded.

43
00:03:36,510 --> 00:03:42,090
So let's send the data in advance and we're coming from either the favorites screen or the category

44
00:03:42,090 --> 00:03:49,880
meal screen. There, we're in the end tapping an item in the meal list and in both items, in both components,

45
00:03:49,890 --> 00:03:54,240
favorite screen and category meal screen, we are using meal list which is good because that means we

46
00:03:54,240 --> 00:04:00,420
can go to meal list here and there, we have this navigate action and now simply besides passing the meal

47
00:04:00,420 --> 00:04:06,330
ID, it would be good if we here already pass the meal title because here we have it available, right?

48
00:04:06,540 --> 00:04:13,350
itemData.item.title, that's our title of the meal. By simply supplying it here, we solve all the problems

49
00:04:13,350 --> 00:04:17,950
we have on the other screen, so that's definitely the approach we want to use here.

50
00:04:18,090 --> 00:04:24,060
So by setting that param here on the component where we trigger that navigation action to the meal detail

51
00:04:24,060 --> 00:04:30,270
page, we fixed this issue because now you see the title is there right from the start and we have no

52
00:04:30,270 --> 00:04:36,180
problem at all there and the same of course also on Android if we give it a try there. My emulator is

53
00:04:36,180 --> 00:04:43,380
just a bit slow but you can generally see it there as well. So that is how we can work with data in the

54
00:04:43,380 --> 00:04:50,850
header when we need it from Redux and with that, we have a solid first state, we're able to use our Redux

55
00:04:50,850 --> 00:04:54,830
data. What we're not really able to do is change it,

56
00:04:54,900 --> 00:04:59,790
so that's the next step, we want to add some logic so that we can change the data, that we can mark favorites

57
00:04:59,880 --> 00:05:01,890
and that we can filter our data.