Let's now take our list of items and render them out as a list using the mapping function to top my
component.
I'll make a new variable called rendered items.
I'll do an item stock map.
And for each item, we're going to return a little bit of J.S. X.
Now, as we are riding out this G.S. X, I'm going to add in a couple of class names.
As usual, all these different class names are coming from the Semantic UI library, and over time,
we're going to wire up that semantic CSX file to our project once again to get a little bit of nice
styling inside of.
You're going to first begin by returning a div.
And inside, they're going to place another div with a class name.
Of title active.
I'll close that off.
Inside there, I'm going to display an icon with the class name of dropdown icon.
And close off the eye tag.
I'll then take a look at that item and I'm going to print out the items title inside of your put item
that title.
After the closing div., I'll put in another.
On that Second d'Hiv, I'll give it a class name of content.
And active.
And then inside there, a paragraph element, and that's where we are going to display our content inside
of some curly braces.
Item dot content like some.
OK.
Pretty simple, straightforward.
Now, the one thing I have left off here, I've not added in a key to this top level element that the
returning.
Remember, every element inside of a list of J.
OSX elements needs to have a key property.
In this case, we will just use the title of each item as our key because it is unique, inconsistent
across renders.
So I'll give the thing a key property item dot title.
All right.
That should be it for right now for rendering our list of items.
Of course, we do have to actually return that from our component down at the bottom.
I'm going to replace the d'Hiv right here.
With a class name or Sumida, each one with a div.
We'll give it a class name of UI styled accordion.
Now, once again, double check your spelling on accordion.
Goes off the d'Hiv, and inside there, we'll display our list of rendered items, and that should be
at.
So let's save this.
What makeover?
Well, I definitely see all the content, but I have no styling whatsoever.
As I mentioned, we do have to wire up semantic UI very quickly.
Let's go through that process again.
In a new browser tab, I'll navigate to see DNG s dot com.
Once there, we can search for semantic and we'll find semantic UI right here.
I'll click on the CSF tab.
And then we are looking for semantic dustmen dots, VSS, which will be towards the bottom.
Somewhere, there it is.
Well, copy that.
Well, then go back over to our index dot HMO file and add in a link tag to the head elements.
Here's is my public directory index dot h t mail.
We can add in a link.
With a rail of stylesheet and an eight track.
And I will paste in that link that I just copied.
We'll save the file.
Let's go back over and refresh the page, see how it looks.
Yeah, there we go.
That's looking pretty good.
All right, now there is one very, very small thing I want to mention very quickly.
Right now, it's really hard to see, but basically there's actually two borders being displayed up
here at the very top.
And when I say border, I'm talking about this gray line that turns out that semantic UI expects a very
strict, very specific structure of each of these items right here.
In particular, semantic UI is assuming that we are not adding in this extra div right here.
It doesn't want to see that digital.
If we put in that extra div, then Semantic is going to accidently apply a CSX rule that displays a
second border up here at the very top.
Make it a little bit easier to see that extra break.
Let's go over to our APT J.S. file.
And right above the accordion.
I could put in a brake line, which will just give us a little bit of space.
And if I save that and then flip back over now, you can see it much more prominently.
There is a double border up there at the very top.
And again, it's because that extra did that we are inserting while we are building our list.
To get that to go away, we essentially need to not return in each Timal element right here.
You might recall that to do that, we can return a react fragment.
We still have to re return everything, because once we eventually have to dids, we just don't want
to have any extra element right there to supply a react fragment.
Remember, we can delete the element name altogether.
But in this case, we also want to supply the key property.
In this case, we have to write out the full name of react pregnant.
So put in, react thought, fragment like.
So I put in the appropriate closing element at the bottom.
Now, on this wrist, we're seeing this list is rendered onto the screen.
There will be no extra element right here.
This is just a containing j a sex element that react understands.
We've got to dibs inside of it.
So if we save this now and go back over, you'll now see that we do not have that extra border at the
very top.
I can go back over to my app and remove that B.R..
All right.
So looks good.
Well, I'd say that stylistically, everything is coming together pretty well.
So now we just really need to make sure that we've got some functionality where we can click on these
things and collapse them or expand them.
That's where the state system and specifically the hook system is going to come into play.
Let's start to understand the whole system in function components in the next video.