1
00:00:00,910 --> 00:00:04,720
Now that we've got our list of posts inside of our post list component we can start to display these

2
00:00:04,720 --> 00:00:05,900
things on the screen.

3
00:00:06,250 --> 00:00:06,700
All right.

4
00:00:06,700 --> 00:00:11,310
I'm going to take a second method or third method I suppose inside of my class.

5
00:00:11,350 --> 00:00:13,450
This is going to be called render a list.

6
00:00:13,540 --> 00:00:18,040
And as you might imagine I'm going to stuff a ton of logic into this thing to take my list of posts

7
00:00:18,220 --> 00:00:19,540
and render them out.

8
00:00:19,690 --> 00:00:24,190
I'm putting all this logic into this helper method of render list just to keep the render method itself

9
00:00:24,400 --> 00:00:26,300
nice and easy to read.

10
00:00:26,320 --> 00:00:32,110
So inside of render list I'm going to return this stuff prop stock posts.

11
00:00:32,380 --> 00:00:41,260
I'm going to map over it and for every post we are going to return a pretty good blob of GSX.

12
00:00:41,380 --> 00:00:44,190
Now as a quick reminder we're making use of semantic UI here.

13
00:00:44,210 --> 00:00:46,630
So on the GSX block we're about to write out.

14
00:00:46,700 --> 00:00:51,350
I'm going to add in a pretty good amount of class names in all these class names are just references

15
00:00:51,350 --> 00:00:56,180
to semantic UI and just trying to get stuff to appear on the screen and look pretty nice.

16
00:00:56,180 --> 00:01:00,050
So I'm going to return a div with the class name of item.

17
00:01:00,320 --> 00:01:02,900
I'm going to remember to give this thing a key property.

18
00:01:03,020 --> 00:01:09,410
Remember that every post that we fetch from that from that API has an ID associated with it and wherever

19
00:01:09,410 --> 00:01:16,370
possible we'd like to use that Id associate with each record as our key property cell say post.

20
00:01:16,400 --> 00:01:20,020
Id like so then I'll close off that div.

21
00:01:20,510 --> 00:01:24,560
Then inside of here I'm going to put in a icon.

22
00:01:24,560 --> 00:01:30,040
If we take a look at our mockup really quick just as a reminder I don't saw the mock up up.

23
00:01:30,200 --> 00:01:31,740
I don't know that the mock up up.

24
00:01:31,820 --> 00:01:35,900
I'm not going to waste any time but essentially on the left hand side of every post we want to show

25
00:01:35,900 --> 00:01:36,780
that icon.

26
00:01:37,010 --> 00:01:41,510
Kind of like of a user or something like that so I'm going to put an italics here with a class name

27
00:01:41,540 --> 00:01:46,430
of large middle Alliant icon user like so

28
00:01:50,060 --> 00:01:54,390
after the tag I'll put down a div with the class name of description.

29
00:01:54,580 --> 00:01:56,920
This is not description but content that's better.

30
00:01:58,630 --> 00:02:04,300
And then inside of that div I want to get a class name description.

31
00:02:07,010 --> 00:02:15,430
Inside of the description div or put down an H to that has the post-up title says the title of the post

32
00:02:15,840 --> 00:02:21,810
and then underneath it will put a paragraph tag with the actual post content which is post-cart body.

33
00:02:21,820 --> 00:02:24,040
Now I'm not making up these two properties right here.

34
00:02:24,040 --> 00:02:27,030
You'll recall that we looked at that post and point just a little bit ago.

35
00:02:27,190 --> 00:02:31,820
Over on the Jason placeholder website.

36
00:02:31,950 --> 00:02:36,600
So if we go down just a little bit here is that posts and point I can open it up and I see that every

37
00:02:36,600 --> 00:02:38,260
post has that title and body.

38
00:02:38,260 --> 00:02:43,320
So that's why we specifically put post-START title and post body OK.

39
00:02:43,330 --> 00:02:44,120
That looks pretty good.

40
00:02:44,120 --> 00:02:46,590
I think that we've got everything we need for right now.

41
00:02:47,150 --> 00:02:50,790
I need to do is make sure that I call render list for my render method.

42
00:02:50,900 --> 00:02:53,740
So I'm going to go down to the render method.

43
00:02:53,830 --> 00:02:56,170
I will remove the console lock.

44
00:02:56,270 --> 00:03:05,080
I'm going to give this div a class name of UI relaxed divided list and then inside the div itself I

45
00:03:05,080 --> 00:03:10,960
will remove the hard coded text a post list and I will replace it with this dot render list.

46
00:03:15,200 --> 00:03:16,800
OK I think that's just about it.

47
00:03:16,810 --> 00:03:21,760
I'm going to save this file and then I'm going to flip back over to my application and we can see the

48
00:03:21,760 --> 00:03:23,370
list of posts appear on the screen.

49
00:03:23,680 --> 00:03:25,160
Awesome.

50
00:03:25,210 --> 00:03:26,590
All right so this definitely looks good.

51
00:03:26,590 --> 00:03:30,490
We're definitely loading up some data and showing it on the screen appropriately.

52
00:03:30,500 --> 00:03:36,280
Last thing we do is make sure that we show the title of the user or the author's name right underneath

53
00:03:36,280 --> 00:03:37,560
the post.

54
00:03:37,600 --> 00:03:38,770
So let's I'm going to try again.

55
00:03:38,770 --> 00:03:40,630
I'm pretty sure I got that diagram up here.

56
00:03:40,630 --> 00:03:42,020
I apologize for not having it.

57
00:03:42,070 --> 00:03:42,500
Here we go.

58
00:03:42,520 --> 00:03:43,320
That's better.

59
00:03:43,640 --> 00:03:45,940
OK so we've got the post list put together.

60
00:03:45,940 --> 00:03:50,800
Remember we had said that we wanted to make a separate component called user header and show it at the

61
00:03:50,860 --> 00:03:52,520
bottom of each post.

62
00:03:52,720 --> 00:03:53,900
So we still have to tackle that.

63
00:03:53,980 --> 00:03:58,690
Let's take a quick pause and we'll start to figure out how we're going to address this problem in the

64
00:03:58,690 --> 00:03:59,460
next video.