Nice work, and once we've got our list now, of course, it's time to work on abutments where we would
want to have buttons for each category plus button for all.
And then, of course, once we click on a button, then we display only the items of that match, that
category.
And then once we click on, of course, then we display all the items and we'll start with manual approach
and then we'll see the downsides.
And of course, eventually we'll switch to a dynamic approach where we iterate over the list and then
automatically get all the categories.
But we'll start simply by just doing that manually.
Now, my first step is going to be creating a that function.
So in the app component, I'm going to create a function by the name of filter items and this function
is going to be looking for a string.
Now I'll call this string category or Excel, and then inside of the function, I would want to iterate
over the original list and that is important.
I'm not talking about menu items, so we will use set menu items to change the list of items displayed.
However, when we're looking for items that match that category, we always need to work with original
list because that one won't change.
And I'm going to start by setting up some kind of variable.
Just be a bit more explicit where we go with new items, then we go with items.
So again, the original list, because that won't change.
Then we go with the filter.
I need to come up with some kind of parameter name, which in my case is going to be item.
And then I'm going to say if the item category properly matches to the string that I'm passing on,
then of course a return item to my new items.
All right.
And then, like I said, we have set menu items.
So I'm just going to use this and we're going to go with some menu items and new items.
So once the app loads, then, of course, we use our whole list, we use the items and then we pass
it in.
So then the value of menu items is equal to my original.
In filter items, I filter the original list and I only look for items whose property category matches
to whatever I'm passing in.
And once I have my function, then of course what I could do is just pass it down to eight categories
since I would want to use it order.
So I'll start here by setting up some kind of problem in my case is going to be exactly the same as
the functional.
So we're going to go with filter items which it and then of course we would need to navigate to the
categories and deal with that function.
Again, we are going to start with just the manual approach and then eventually we'll make this dynamic,
because I would want you to see the downsides of the manual approach.
So we're looking for a prop by the name of filter items, of course, and run inside of the categories
in the return.
I would want to add those buttons and of course, since this is a manual approach, I'll just add them
manually.
Eventually we'll iterate over the list, but not right now.
So just so it looks a bit better, I'm going to go with B10 container over here and then inside of the
container, let me just add a few buttons manually.
So we're going to go with Button.
I will add last name here and I'll say filter b10 and line on click.
I would want to get the items that match the category of breakfast.
Now if you would want to see what categories we have, of course you can just navigate the data.
And then as you're looking at the items, notice you have a category for lunch of Category four shake
and all that.
So since we're going manual approach, I'm not going to add all of them, but just to showcase that
my function works because this is exactly what I'm going to do.
Where I have unclick that, I would want to have my inline function, of course.
And then here, let's call filter items and then let's just set up that string, and like I said, I
would want to start with breakfast, which sell online instead of the button.
Let's also write what items were going to be getting.
So once you say you should see the button and then once you click course, now we're displaying only
the items whose property category is equal to a breakfast.