So, no, let's add some functionality to the menu page, so we'll pass the props basically, and this
all the data, which is static here, will try to make it dynamic and we'll try to load it from the
data logs.
That's what we're going to do.
Well, first of all, let us pass some props here, so I'll pass object.
I'll pass an object here and that will be items and inside, and we'll nab this item inside.
So after?
After this election, we'll map it for mapping is a diverse group functions, we will lead to clear
places and head like item, the dart map and inside this, that will be the menu item.
And this will like this is a function, basically.
So.
And there will be a constant object that will help it.
Title image.
And description that will be DSC and will have the price.
That will be equal to.
Menu.
Item.
Sounds fair enough.
Next, we'll return.
We'll return something else.
So here we'll return
in the pattern, this is what we'll return.
Every single thing from this.
Article two, basically like.
The entire day of everything will be copied and.
Well, basically tell this to OK, that will be a bill that will cut and paste inside this bill.
Once you pasted it inside, so.
Inside that is the article.
Image tag harder.
It's for.
The attack, when there's an article, then you have this closing thing and then you have the three
racist lie that is only two.
So this map, this is an argument to the function, basically.
So this sorry, this one placard will be closing here between this and now, I think we got to go.
Yeah.
Now there's no roads and that is also done.
So this was, I guess, you know.
This was the thing.
Let me just save it.
Yeah.
Now what we'll do is we'll change this all all these detecting to the dynamic.
OK, so the 30 for it?
First of all, the comes of the image or the article, basically, because the card before that will
provide.
The key and that key will be the I.D. And next, we'll be having the glass name.
Class name will be on the menu item menu, not Upwork, is the lowercase.
Menu item, and inside this email, there will be the sauce that will also be our dynamiting on the
sauce will be image and it will be the title of the image.
Or not not, and so the pattern, then is that that will be the title character and class name will
be put to the test wolf.
Let me just save it and see if things are working or not.
So there are some still some errors because.
Because we have not yet world with gorgeous files, so no problem with that.
I we'll work around it before first.
Let us finish off with this.
Who in the day started, what will do is that we'll just right the dynamic, you know, vital to that
will be title and inside this forward for the money, basically.
That would be the case.
I will be concerned, but here there will be a prize pool that will be price and the amount we have
given in like dollars.
So that will be just multiplied to make it look like this and also will give them that dark cloud function
so that we don't have the decimal values, OK?
So that would be Mad Mad Dog Lord, and we'll fight this value for this value will be converted to integer
value.
If if that if that is something like after the raid similar to that would be just rounded off and this
will be converted to the floor value.
OK, so this is a JavaScript function, basically metaphor.
This has nothing to do with React, OK?
And how do we give a class name to the age group and that the class name would be price class name and
that would be price?
And let me just save it, and of course it will not, but because we have not worked with the abductees.
But still, we can just configure this as much as possible.
Go inside this paragraph tag that it was their description which we wrote like statically.
But now it will be the dynamic thing.
So description and inside the glass name that is item text.
So that's good.
We see it and see things and things aren't what they should be.
And.
The Minotaur just looks perfect, like whatever we expected that that is there, and now we will move
on to the final and think that as a configuring the ABD or this according to every component and rendering
it and making use of the map function and then calling the component and passing the values to the props
up until the proper paths inside the inside that particular component.
So what we'll do is we'll just we'll just call that component here and we'll pass the value to the.
So that is what we're going to do next.
Who?
That will.
Let let me just begin it and the rest we will see in the next few days or so, first of all, let me
just like begin to, first of all, will import all of that too many we have already imported.
So now we have to import data from the data rods, so import items from.
Less data is also you can write, you can leave the data as data also, there's no problem with that,
OK?
And then we'll write, we'll write a constant.
And they're constantly concerned, and that will be all categories now.
What we are doing here is that we are calling all the categories.
And whenever the user clicks on one of them, then the particular related to that category will be shown.
So right now, that would the it might seem a little weird, but things will make sense once we just
go into it deeply.
And so here there will be.
String that will say all.
And that will be a valid operator, which will say new.
And that will be the that.
Inside this room will ride the.
Items and dart map and will map for the item like whatever the plural value here.
So here it will be the singular one and its items it will with the item.
OK, so now here.
There will be in line factor federal function and we should be returning Item Dot.
But that the.
Oh, we can just see if it.
And of course, things are not complete right now.
We'll do things now, what we'll do is we'll move further and will calm her down after this ad and we'll
write.
Some like this will write you like you state folks, and I will provide some values and we'll pass some
values.
But all of that will be done now and that will do in the next two, probably or will.
I will write the EU's trade talks, will map some function and we'll pass props to.
This is two components that will be the basic rendering and that will the final rendering of the project.
So you see in the next video.