1
00:00:01,120 --> 00:00:06,670
Let's now take our list of items and render them out as a list using the mapping function to top my

2
00:00:06,670 --> 00:00:07,200
component.

3
00:00:07,300 --> 00:00:09,610
I'll make a new variable called rendered items.

4
00:00:10,450 --> 00:00:11,800
I'll do an item stock map.

5
00:00:12,610 --> 00:00:16,210
And for each item, we're going to return a little bit of J.S. X.

6
00:00:16,780 --> 00:00:20,620
Now, as we are riding out this G.S. X, I'm going to add in a couple of class names.

7
00:00:21,070 --> 00:00:25,660
As usual, all these different class names are coming from the Semantic UI library, and over time,

8
00:00:25,690 --> 00:00:30,520
we're going to wire up that semantic CSX file to our project once again to get a little bit of nice

9
00:00:30,520 --> 00:00:31,330
styling inside of.

10
00:00:31,390 --> 00:00:34,990
You're going to first begin by returning a div.

11
00:00:36,750 --> 00:00:40,600
And inside, they're going to place another div with a class name.

12
00:00:41,990 --> 00:00:43,870
Of title active.

13
00:00:45,060 --> 00:00:46,110
I'll close that off.

14
00:00:47,300 --> 00:00:54,140
Inside there, I'm going to display an icon with the class name of dropdown icon.

15
00:00:55,460 --> 00:00:56,660
And close off the eye tag.

16
00:00:58,820 --> 00:01:03,400
I'll then take a look at that item and I'm going to print out the items title inside of your put item

17
00:01:03,760 --> 00:01:04,600
that title.

18
00:01:06,710 --> 00:01:09,170
After the closing div., I'll put in another.

19
00:01:11,900 --> 00:01:15,020
On that Second d'Hiv, I'll give it a class name of content.

20
00:01:16,560 --> 00:01:17,430
And active.

21
00:01:20,600 --> 00:01:27,320
And then inside there, a paragraph element, and that's where we are going to display our content inside

22
00:01:27,320 --> 00:01:28,340
of some curly braces.

23
00:01:28,700 --> 00:01:30,500
Item dot content like some.

24
00:01:32,580 --> 00:01:32,820
OK.

25
00:01:33,310 --> 00:01:34,420
Pretty simple, straightforward.

26
00:01:34,880 --> 00:01:39,690
Now, the one thing I have left off here, I've not added in a key to this top level element that the

27
00:01:39,700 --> 00:01:40,240
returning.

28
00:01:40,700 --> 00:01:43,040
Remember, every element inside of a list of J.

29
00:01:43,040 --> 00:01:45,430
OSX elements needs to have a key property.

30
00:01:46,000 --> 00:01:51,220
In this case, we will just use the title of each item as our key because it is unique, inconsistent

31
00:01:51,250 --> 00:01:52,240
across renders.

32
00:01:53,080 --> 00:01:56,760
So I'll give the thing a key property item dot title.

33
00:01:59,210 --> 00:01:59,510
All right.

34
00:01:59,690 --> 00:02:02,630
That should be it for right now for rendering our list of items.

35
00:02:03,110 --> 00:02:06,980
Of course, we do have to actually return that from our component down at the bottom.

36
00:02:08,970 --> 00:02:10,860
I'm going to replace the d'Hiv right here.

37
00:02:12,940 --> 00:02:15,530
With a class name or Sumida, each one with a div.

38
00:02:16,000 --> 00:02:19,090
We'll give it a class name of UI styled accordion.

39
00:02:19,150 --> 00:02:21,350
Now, once again, double check your spelling on accordion.

40
00:02:25,080 --> 00:02:31,710
Goes off the d'Hiv, and inside there, we'll display our list of rendered items, and that should be

41
00:02:31,710 --> 00:02:31,980
at.

42
00:02:35,890 --> 00:02:36,750
So let's save this.

43
00:02:37,200 --> 00:02:37,800
What makeover?

44
00:02:39,090 --> 00:02:42,150
Well, I definitely see all the content, but I have no styling whatsoever.

45
00:02:42,540 --> 00:02:45,210
As I mentioned, we do have to wire up semantic UI very quickly.

46
00:02:45,600 --> 00:02:46,830
Let's go through that process again.

47
00:02:48,550 --> 00:02:51,570
In a new browser tab, I'll navigate to see DNG s dot com.

48
00:02:53,660 --> 00:02:57,890
Once there, we can search for semantic and we'll find semantic UI right here.

49
00:03:00,030 --> 00:03:01,600
I'll click on the CSF tab.

50
00:03:02,580 --> 00:03:07,770
And then we are looking for semantic dustmen dots, VSS, which will be towards the bottom.

51
00:03:10,680 --> 00:03:12,630
Somewhere, there it is.

52
00:03:14,130 --> 00:03:14,980
Well, copy that.

53
00:03:15,820 --> 00:03:21,850
Well, then go back over to our index dot HMO file and add in a link tag to the head elements.

54
00:03:23,060 --> 00:03:25,720
Here's is my public directory index dot h t mail.

55
00:03:27,850 --> 00:03:29,980
We can add in a link.

56
00:03:31,060 --> 00:03:34,020
With a rail of stylesheet and an eight track.

57
00:03:34,930 --> 00:03:37,400
And I will paste in that link that I just copied.

58
00:03:43,090 --> 00:03:43,960
We'll save the file.

59
00:03:46,710 --> 00:03:49,710
Let's go back over and refresh the page, see how it looks.

60
00:03:50,250 --> 00:03:50,790
Yeah, there we go.

61
00:03:50,910 --> 00:03:51,690
That's looking pretty good.

62
00:03:53,460 --> 00:03:56,700
All right, now there is one very, very small thing I want to mention very quickly.

63
00:03:56,970 --> 00:04:01,560
Right now, it's really hard to see, but basically there's actually two borders being displayed up

64
00:04:01,560 --> 00:04:02,340
here at the very top.

65
00:04:02,420 --> 00:04:08,160
And when I say border, I'm talking about this gray line that turns out that semantic UI expects a very

66
00:04:08,220 --> 00:04:12,990
strict, very specific structure of each of these items right here.

67
00:04:13,380 --> 00:04:18,570
In particular, semantic UI is assuming that we are not adding in this extra div right here.

68
00:04:18,630 --> 00:04:19,800
It doesn't want to see that digital.

69
00:04:20,340 --> 00:04:25,440
If we put in that extra div, then Semantic is going to accidently apply a CSX rule that displays a

70
00:04:25,440 --> 00:04:27,480
second border up here at the very top.

71
00:04:28,400 --> 00:04:31,340
Make it a little bit easier to see that extra break.

72
00:04:31,580 --> 00:04:33,220
Let's go over to our APT J.S. file.

73
00:04:33,980 --> 00:04:35,360
And right above the accordion.

74
00:04:35,390 --> 00:04:38,750
I could put in a brake line, which will just give us a little bit of space.

75
00:04:39,270 --> 00:04:42,680
And if I save that and then flip back over now, you can see it much more prominently.

76
00:04:42,770 --> 00:04:44,750
There is a double border up there at the very top.

77
00:04:44,930 --> 00:04:49,130
And again, it's because that extra did that we are inserting while we are building our list.

78
00:04:50,880 --> 00:04:56,070
To get that to go away, we essentially need to not return in each Timal element right here.

79
00:04:56,640 --> 00:04:59,850
You might recall that to do that, we can return a react fragment.

80
00:05:00,360 --> 00:05:04,470
We still have to re return everything, because once we eventually have to dids, we just don't want

81
00:05:04,470 --> 00:05:08,550
to have any extra element right there to supply a react fragment.

82
00:05:08,580 --> 00:05:12,180
Remember, we can delete the element name altogether.

83
00:05:12,450 --> 00:05:15,000
But in this case, we also want to supply the key property.

84
00:05:15,480 --> 00:05:18,120
In this case, we have to write out the full name of react pregnant.

85
00:05:18,150 --> 00:05:20,430
So put in, react thought, fragment like.

86
00:05:20,430 --> 00:05:24,540
So I put in the appropriate closing element at the bottom.

87
00:05:25,640 --> 00:05:28,640
Now, on this wrist, we're seeing this list is rendered onto the screen.

88
00:05:28,880 --> 00:05:30,890
There will be no extra element right here.

89
00:05:31,040 --> 00:05:34,660
This is just a containing j a sex element that react understands.

90
00:05:34,670 --> 00:05:36,260
We've got to dibs inside of it.

91
00:05:37,260 --> 00:05:42,020
So if we save this now and go back over, you'll now see that we do not have that extra border at the

92
00:05:42,020 --> 00:05:42,530
very top.

93
00:05:43,520 --> 00:05:46,130
I can go back over to my app and remove that B.R..

94
00:05:50,440 --> 00:05:50,680
All right.

95
00:05:50,740 --> 00:05:51,310
So looks good.

96
00:05:52,120 --> 00:05:55,210
Well, I'd say that stylistically, everything is coming together pretty well.

97
00:05:55,310 --> 00:05:59,290
So now we just really need to make sure that we've got some functionality where we can click on these

98
00:05:59,290 --> 00:06:01,450
things and collapse them or expand them.

99
00:06:02,200 --> 00:06:06,520
That's where the state system and specifically the hook system is going to come into play.

100
00:06:07,090 --> 00:06:10,960
Let's start to understand the whole system in function components in the next video.