So how can we get information about the category we clicked on, we selected from this category screen
to the category meals screen? Well on the categories screen where we navigate to category meals,
for this navigation action
besides the route name, we can also pass the params.
That's another key this object you passed to navigate accepts and this takes itself an object of key-value
pairs, of any key-value pairs and as many key-value pairs as you want.
So these are simply parameters, extra data you're passing to the new screen which is being loaded.
Now there, you could set up a parameter named category ID and the name is totally up to you, that could
be just ID,
cid or my hobby, whatever you're building and whatever data you need to forward, here we're forwarding
a category ID hence I will name it such.
This now should be in our scenario here of course,
the ID of the category we tapped on.
Now of course, we're getting our item data here for each grid item which is rendered,
this holds the item and this has a title, a color and well, an ID,
so the category ID is itemData.item.id.
Now we're forwarding that ID to the new screen which is being loaded and
that of course is the important thing here,
this allows us to then use that data in that new screen. How? Well, let's go there,
let's go to the category meals screen and see how we can extract that parameter.
We know that we'll get one,
how can we now get access to it?
For this, we can again use props navigation,
so this special prop we're getting because this component here is getting loaded with the help of a React
navigation navigator and on navigation, we don't just have navigate and push and so on,
we also have getParam, a method provided to extract a parameter we receive. getParam takes a string
with the name of the parameter we want to extract and of course, that should be the name you chose here
as a key in that params object.
So here, I added category ID, hence that's the name I want to use here.
This will give me the cat ID, that category ID, This will give me the value we're storing here on
that key name, in this case,
that's the ID,
so that's the value
we're extracting for category ID in the category meals screen.
So now we have the cat ID and we can now use that to of course get access to all the meals that fit
into this category,
right now we have no meals so we'll have to postpone this but at least we can also use this to get our
category title and use that here and for that, all we need to do of course is we need to import categories,
so our categories array here from data/dummy-data and we have the ID, we have an array of categories, of
course we can find our selected category or whatever you want to name it by having a look at categories
and there, we can use find which takes a function which it executes on every element in the array,
so on every category and gives us the item where this function returns true which should be the case
if the ID for the category we're looking at matches the cat ID we're retrieving from our params.
This gives us the selected category
and to prove that this works, I'll output it here in a text component, I'll output selectedCategory.title
here. Now with that, if we go back and we navigate to that category, we see Italian here right above
my buttons, we see quick and easy now,
so that is working. This is how we're passing data forward and how we're extracting it
and of course you can pass multiple parameters, as many as you need and parameters don't have to be IDs,
you could pass objects, you could pass text, numbers and arrays, whatever data you need to pass, you can
pass. You might notice however that of course with that, we're able to use our category here in our screen
but we want to use it here in the header.
Well let's tackle that in the next lecture.