And once we have access to the cocktails, all right, we can just remove the council log online where
we have the return, we're going to go with section and a class name by the name of S..
Then also, I would want to have a hearing interview with a class name of section title, section hyphen
title inside of it.
Let's tie cocktails and line right next to it.
There's going to be a cocktail center.
So this is where I would want to iterate over my work and for every item I would want to return a cocktail
component.
So we go here.
With the first, a class name of Cocktail's Santore.
Cocktails online center and then inside of this there, I said, let's iterate over our area, which
will use a map method.
And then again, I'm just going to be lazy and call this item.
Now, the good news is that in the item I have the area and I go with a return online.
I'm looking for my cocktail component.
Then I would want to set up the key and I'm looking for item that ID.
And then also I'd want to spread out all the properties.
So I'm going to say object per operator that the dot and then item and the last thing that we need is
to handle that in the cocktail component.
So I'm going to navigate to that particular component.
The properties that I'm looking for are image, name, ID info and glass, because remember, we still
need to pass that idea into the link because of course, we'll grab that ID in the single cocktail page
and do another fetch.
So let's say here, image, name, I.D. info and then glass.
These are properties that I'm looking for and as far as their turn, it is going to be an article with
a class of cocktail class name and then cocktail.
Then I also want to have the image container.
So let's go with div the class name here with IMG and then hyphen container inside of this of let's
place our image.
So we're going to set up our source of course, which will be equal to the image.
Alternative will be equal to the name like so and then we're going to have the Fuhrer where we're going
to have the info, we have one there and then right next to it let's have a cocktail cocktail and then
hyphen for her.
And let's go with adding three.
We're going to have name glass and info, so heading three, heading for an inside of the heading for
we go with glass.
Let's say it just so I can see how it looks.
OK, that looks about right.
And also, I want to go with paragraph, and that, of course, will be my info.
Essential in here, we just display which glass are we using and or I'm sorry, this one was whether
yeah, my apologies.
This one was whether it was alcoholic or not.
Of course, the glass one was the heading for.
And then lastly, let's set up that link, because remember in the app where we have our REACT router,
I have a path for Fort's cocktail.
And unfortunately and then, of course, as I'm setting up my link, I would want to make it dynamic
where, yes, it is going to navigate to the same component, but in every case will pass in different
ID.
We navigate back to the cocktail right after the paragraph.
We're going to go with our one component and let me close the sidebar here.
So link component then we have to.
And of course, now the value will be dynamic and not to disrupt as dynamic we go with Curly versus
than the template string.
And we have the first part of your URL.
Again, just because I said the supporting app, I have to follow the same syntax.
So I go first and then cocktail and then one more forward slash and then now I would want to grab that
idea, the dynamic value, and then since I would want to add a little bit of styling.
I'm going to go between between primary and then between and then details like so and then instead of
the link what just say details, we say it.
And then if I check it out on a bigger screen, there it is.
Now, of course, we have a list of cocktails.
And every time I click on Navigate here, the single cocktail where of course I'm going to have my I.D..
Now, of course, we're not handling that yet in a single cocktail, but what's beautiful is that we're
passing in that value.
So then once we navigate here, will perform another fetch.
And of course, in that case, the euro will be a little bit different.
Where will use this?
You are the one that has the parameter of AI and we can zoom in, of course, and will pass in whatever
we're getting back from the react router.