So we want to find the meals that fit into the category we selected, therefore actually in the category
meal screen component,
we're not really interested in the selected category but we're highly interested in the meals that belong
to that category. Now
for that, we can first of all import our meals array because that holds all possible meals we have
and now we want to filter out those which actually have the category ID we selected in there, category
ID array which every meal has. You will see in the dummy data that every meal has this array of category
IDs to which it belongs
so that's what we'll use for filtering.
So in the category meals screen, we want to find the meals that belong to that category we selected and
I'll store them in a constant named displayed meals,
the name is of course up to you and there, I'll look at my meals,
so that's the entire meals array and use the filter method Javascript offers to run a function on every
meal in that array where we get the meal automatically as an argument and where we have to return true
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
and we want to keep all meals where the category IDs property of that meal we're looking at contains
the category ID we selected here.
So here, I will return true if meal category IDs index of which is also a Javascript method, the cat
ID we extracted from the route params, if that is greater or equal than zero because that will be minus
one if the category ID is not part of the category IDs, if it's zero or greater, then we know that
this meal has this category ID in its category IDs array and this will give us an
array of displayed meals for that selected category,
now that's what we want output here. Now for this,
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
a grid, so instead of the button which we'll not need anymore, I'll import FlatList here and then render
my FlatList like this
and now there the data I feed in of course is my displayed meals array because that are the meals
I want to render to the screen.
Now as mentioned before, modern versions of React Native automatically look for ID field in a meal to use
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
extractor here where I get the item and the index and I know that on each meal, I'll have an ID field because
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
that here in key extractor.
More important than the key extractor however is render item which of course should point at a function
that we use to render a single item in that list and there I'll, just as before, set up a new function,
I'll do it here inside of my component function so that I can use props and I'll name this render
meal item, the name is totally up to you. In there, I will get some item data, I know this because the flat
list passes us as item data object into this function and in there, we have to return a jsx code that
should render a meal item and there I'll render a view and for the moment, then simply a text component
in there where I want to output itemData.item.title, so just the name of the meal for now, later
we'll also display the image there but for now, this will do and now render meal item is what I use here
as the function render item should point at. This should render a basic list of meals, let's see whether
that works. If we save this and we now select let's say Italian, I see spaghetti with tomato sauce, doesn't
look too bad.
Quick and Easy, we see four meals and hamburgers, we see the classic hamburger, light and lovely, we see
two recipes, so that seems to work, looks like recipes are selected based on the category we chose and
that's of course great. Now it's again time to work a little bit on the styling because I'm not sure
about you but I think we can improve that a little bit.