OK, so now we'll add some more functionality to this abductees.
Well, basically, we are going to create states here using must use photog and will map the data,
we'll fetch the data and we'll pass the props to the component all of that we're going to do now.
So first of all, we'll create some states for that.
We need to import the EU data from the Act.
So we'll do that here or in a coma here.
And we'll right.
It was a state and we imported the use state.
And after that, we want to like initialize them.
Well, first of all, we'll create a state here, and that will be that would be the menu items menu.
Items and hair that will be the set.
Menu items said the menu items, and this would be equal to the U.S.
State.
And her dad would be the initial the initial value will be the items.
Because whatever the values there, so that that will be, they are not.
So next.
We'll create another state, and that will be for the greater good.
So how do we write some code for the categories that will be Konst and here that will be available,
that is known as categories.
And there will be a function that will be the said categories and this is equal to.
U.S.
Stewart and value that is like the initial value, there's all categories.
It got his.
So this is the initial all categories, OK?
And next, we'll filter the items according to the category, the category, which user has selected
only those products should be listed out either.
All else should not be listed out.
That is what we are going to do here.
So we'll that out, that we'll write a constraint and then we'll create a function and the function
name will be free that items so pretty to.
Items and that is a function, so we'll pass that category as an argument.
That read and heard of will provide the federal function, and inside this means check like if the category
is all we have to display all the products and if it's a specific category, then only products related
to order like issues is related to that particular category will be tested in the categories on display,
auditing, whatever it is that in the database, OK?
So if we tried an if statement, if the integrity.
Not categories.
Integrity.
Equally critical to.
All.
Then.
What we have to do, we have to start menu items to items.
Third.
Menu items to pass and sidewalk items, food.
Who's?
And it was just right, a written statement there, because the kidney function don't return is a mandatory
thing.
And.
This war so far, and next, what we'll do is we'll create another concern that is for the new items
like the all that one for that will be responsible for displaying the.
Items related to that particular category right now, what we have done is we'll just to show all the
items if the category is all items.
Now what if the categories?
Not all.
And it is something else, only a specific category, but we have to display that item a little.
That category is right.
So that is what will right now contest new.
Items is equal to items, Darth Vader and this will expect to function and inside that there will be
an argument, so the argument would be item.
And here that will be item guard category.
And that should be equal, do not fall.
We need to equal those that Doug Reed.
This one, yeah, this one.
And after that.
You should be.
It should be like setting the start menu items to the new items because initially there are.
Machines that are items, right?
But that would be the new items.
Not the items still here.
The set of menu items, and so that it would be the new items, new items.
And now we passed the probably I know this is the most crucial part which we are going to do right now.
For.
This is done now inside the main function.
We have a section that is called as a new section, which have a class name of menu section.
Next, we have a title.
And inside that, we have written our menu.
Then we have an underline and after the underline, will will close this.
So if and like, we need to provide another day for the title that title.
This is closed here, after all the menu.
And underline should be inside this debate.
That is where it was coming so far because it was an inside the state.
But this underlined should be inside this state like right below the menu, OK?
And now comes the turn of the category and the menu items.
And now is the time when we will pass the value to the props, which we have.
Like one insert like in the menu, you see, these are the props.
But is it that if the menu here is the prop, that is the item?
And inside the category, we have to put all of the categories in the food items.
All of the all of those and lagging the board, both of them that will be doing right now.
OK, so before that, first of all, will grab the category eating or the categories by have written
category here and not categories.
OK, it doesn't matter.
Doesn't matter.
Maybe you can just write categories, but the component name is categories so that we can just go with
that.
There's no problem that there's just a naming convention.
OK, so now we'll provide the value to this category, as you'll see.
This categories.
We passed a we have already passed this lake inside the lake prop, but we have to give the value to
it now right here.
Categories will be having the value categories will be equal to categories.
So this is a different category, and that is different, almost like spelling in a word, everything
the same.
Don't get confused.
Next will be having to filter items or filter items.
This filter items and this will be having the rally of the third items.
And this is it.
Let me save it and let me see in the browser if it's showing.
Let me just refresh this.
And, OK, they're showing that.
OK, so let me just commend this menu as of now.
For more on that.
And come here, you can see.
Our categories are visible and they are all clickable and CSAs, which we applied is also working for
it.
So that is the best part and that what we did is is not working, OK?
Now we'll try to come in this and inside this, there will be.
The value to the product now in the menu would probably have passed, that is the item for this item
will be holding the value, whatever we pass inside this put up, OK?
So inside the menu will pass the value to the items pro who will pass it to the items.
That is equal to the menu items, I guess now is the final thing it should work.
And let us go to the browser and see.
OK, now I'm in the browser and this is right now, and it was not at all when we go to the oil, we
see all of the issues along with the pictures and the title and description and all of that stuff.
Then we go to the breakfast, we see the breakfast.
Then we go to lunch.
We see the lunch.
Then we go to the shakes.
We see the images and title and the description and the price of the shakes available in that cafe.
So all of this is done using this all whatever we have been doing so far.
So.
OK, so now we are done with the look almost done with the application they're designing in converting
part is not done and the functionality is also like gold.
The know what I'm thinking is that we should holstered all land on a service, so I think we will go
with it is as of now, so OK.
So in the next review, what we'll do is we'll host this application.
Live on fire is and I teach you how to use fire based also.
So that's a really, really important thing like whatever work you are doing.
Whatever website you're creating, it's really important to host it.
And once you also do can give the you order to your friends, family and or even your employer.
And you can just talk, you can just create a good impression.
And you can even like, start your own business and just host it online.
That will be doing in the next one.
You will be hosting an application live on Firebase and Firebase.
If you don't know what is Firebase that I'll tell in the next review.