1
00:00:03,000 --> 00:00:05,566
We wrote a "getReviews" function,

2
00:00:05,566 --> 00:00:08,080
that lists all the Markdown files,

3
00:00:08,080 --> 00:00:09,707
and loads each review.

4
00:00:09,780 --> 00:00:11,921
This way in our ReviewsPage

5
00:00:11,921 --> 00:00:13,902
we can call that function

6
00:00:13,982 --> 00:00:15,801
and automatically get the

7
00:00:15,801 --> 00:00:17,620
data for all the reviews.

8
00:00:17,692 --> 00:00:19,782
What we still need to do is

9
00:00:19,782 --> 00:00:21,871
actually display that data.

10
00:00:21,948 --> 00:00:25,113
Instead of having these two list items,

11
00:00:25,113 --> 00:00:27,642
we'll want to render an item for each

12
00:00:27,642 --> 00:00:29,761
element in the "reviews" array,

13
00:00:29,830 --> 00:00:31,963
by calling the "map" method,

14
00:00:32,070 --> 00:00:34,309
and transforming each object into

15
00:00:34,309 --> 00:00:36,277
the appropriate JSX elements.

16
00:00:36,345 --> 00:00:38,413
We can simply reuse the code

17
00:00:38,413 --> 00:00:40,333
for an existing list item.

18
00:00:40,407 --> 00:00:43,442
And we won't need the second item any more,

19
00:00:43,442 --> 00:00:45,465
because we'll repeat the same

20
00:00:45,465 --> 00:00:46,930
code for each review.

21
00:00:47,000 --> 00:00:49,724
Now, let's insert the right properties,

22
00:00:49,724 --> 00:00:53,002
like the "review.title" in the "h2".

23
00:00:53,002 --> 00:00:56,900
And the img src will be "review.image".

24
00:00:57,042 --> 00:00:59,172
As for the Link href,

25
00:00:59,172 --> 00:01:02,406
we need to change this to a template literal,

26
00:01:02,406 --> 00:01:04,900
so we can then replace the last

27
00:01:04,900 --> 00:01:07,396
segment with the "review.slug".

28
00:01:07,476 --> 00:01:10,641
Since the "slug" is unique to each review,

29
00:01:10,641 --> 00:01:14,005
we can also use it as the "key" for each item.

30
00:01:14,005 --> 00:01:17,599
In React, whenever we render an array of elements,

31
00:01:17,599 --> 00:01:20,980
we need to assign a unique "key" to each one.

32
00:01:20,980 --> 00:01:23,426
Anyway, if we save this page now,

33
00:01:23,426 --> 00:01:26,038
you can see that it's showing "Hellblade",

34
00:01:26,038 --> 00:01:30,072
in addition to the other two games we already had.

35
00:01:30,072 --> 00:01:33,241
So it's automatically listing all the reviews,

36
00:01:33,241 --> 00:01:36,064
based on the existing Markdown files.

37
00:01:36,064 --> 00:01:38,146
Let's try clicking on an item,

38
00:01:38,146 --> 00:01:40,962
just to make sure the links are working.

39
00:01:40,962 --> 00:01:41,908
That's good.

40
00:01:41,908 --> 00:01:44,113
Now, let's see if we can improve

41
00:01:44,113 --> 00:01:47,306
the way this page looks on a larger screen.

42
00:01:47,306 --> 00:01:50,352
Instead of showing the items in a column,

43
00:01:50,352 --> 00:01:53,504
let's see how it works with "flex-row".

44
00:01:53,504 --> 00:01:56,143
It looks better on a large screen,

45
00:01:56,143 --> 00:01:58,068
but let's see what happens if

46
00:01:58,068 --> 00:01:59,860
we make the window smaller.

47
00:01:59,926 --> 00:02:03,750
It shrinks all the cards, which is not very nice.

48
00:02:03,750 --> 00:02:07,703
We can add the "flex-wrap" class to prevent that.

49
00:02:07,703 --> 00:02:10,138
This should automatically wrap the

50
00:02:10,138 --> 00:02:12,574
items if there's not enough space.

51
00:02:12,645 --> 00:02:15,461
If the window is large enough, it will

52
00:02:15,461 --> 00:02:17,905
show all of them in a single row.

53
00:02:17,979 --> 00:02:20,248
But if they don't all fit,

54
00:02:20,248 --> 00:02:22,419
then it will move some of the

55
00:02:22,419 --> 00:02:24,066
items to the next row.

56
00:02:24,141 --> 00:02:27,304
And if there's only enough room for one item,

57
00:02:27,304 --> 00:02:30,754
it effectively becomes a single column again.

58
00:02:30,754 --> 00:02:33,770
So this is a simple way to automatically

59
00:02:33,770 --> 00:02:35,051
arrange the items

60
00:02:35,127 --> 00:02:37,205
based on the available space.

61
00:02:37,687 --> 00:02:41,049
By the way, we can remove this log message now.

62
00:02:41,049 --> 00:02:44,382
No need to print the full data every time.

63
00:02:44,382 --> 00:02:47,553
But this is how we can automatically display

64
00:02:47,553 --> 00:02:49,932
a card for each available review.