How can we solve that problem that we here need to find a specific meal and we can't really use our
selector here in the navigation options?
Now there are two possible fixes - fix number one is that we again use the good old params to communicate
between component and navigation options
as I showed it in the navigation module. Here in the component, we are loading our meal, so of course here
we can use props navigation set params and now set the params to a new value here and now we can use
set params to forward the selected meal or its title to the header and whatever you set here is params
by the way will be merged with the existing params, so this will not override them, so you'll not override
your mealId which you're retrieving here, that will still be there, you're just adding something new,
you're only overriding a param if it already exists in the params.
So here, we could add the meal title key and set this to selected meal.title.
Now this means that I sent these params to my header when this component renders in the end.
Now since this will change props, we would typically end up in an infinite loop,
so to break this, we'll use use effect here
as I showed it in the navigation module and actually do that inside of use effect.
So here we can use use effect
and as a dependency, I'll specify an empty array for now and then set params here inside of the use effect
function
and I won't have an empty array here, instead my dependency here is my selected meal.
When that changes, I want to forward the new information to the header. Now we'll see if that works,
let's go to the header
and there we can now retrieve that from the parameters.
So here I have my meal title,
I can get this with navigationData.navigation.getParam meal title,
that was the name I chose when setting the params here.
Now with the meal title selected here,
we can set header title to that meal title and comment this line out because it won't work anyway
and let's give this a try.
Let's save this and go to the detail page and whilst this works,
you'll see a problem. When this loads, initially there is no title and this only pops in
after a while.
So only after this is fully loaded, we see that title pop in
which isn't too beautiful
and the reason for that simply is that our logic here works but since use effect runs after the component
has been rendered for the first time, we wait for the component to render for the first time until we
send the params to the title and that means that when this transition is still playing and the rendering
hasn't been fully finished, we're not really showing that title.
That's why this might not be the optimal solution here
and I will comment this out. A better solution here, as cheap as it might sound
but that's also a solution which you can often use, is that you simply forward the title which we'll
need here from inside the component you're coming from, so that you load it when you are in the component
that will go to this component and you send it to this component before it's loaded.
So let's send the data in advance and we're coming from either the favorites screen or the category
meal screen. There, we're in the end tapping an item in the meal list and in both items, in both components,
favorite screen and category meal screen, we are using meal list which is good because that means we
can go to meal list here and there, we have this navigate action and now simply besides passing the meal
ID, it would be good if we here already pass the meal title because here we have it available, right?
itemData.item.title, that's our title of the meal. By simply supplying it here, we solve all the problems
we have on the other screen, so that's definitely the approach we want to use here.
So by setting that param here on the component where we trigger that navigation action to the meal detail
page, we fixed this issue because now you see the title is there right from the start and we have no
problem at all there and the same of course also on Android if we give it a try there. My emulator is
just a bit slow but you can generally see it there as well. So that is how we can work with data in the
header when we need it from Redux and with that, we have a solid first state, we're able to use our Redux
data. What we're not really able to do is change it,
so that's the next step, we want to add some logic so that we can change the data, that we can mark favorites
and that we can filter our data.