We wrote a "getReviews" function,
that lists all the Markdown files,
and loads each review.
This way in our ReviewsPage
we can call that function
and automatically get the
data for all the reviews.
What we still need to do is
actually display that data.
Instead of having these two list items,
we'll want to render an item for each
element in the "reviews" array,
by calling the "map" method,
and transforming each object into
the appropriate JSX elements.
We can simply reuse the code
for an existing list item.
And we won't need the second item any more,
because we'll repeat the same
code for each review.
Now, let's insert the right properties,
like the "review.title" in the "h2".
And the img src will be "review.image".
As for the Link href,
we need to change this to a template literal,
so we can then replace the last
segment with the "review.slug".
Since the "slug" is unique to each review,
we can also use it as the "key" for each item.
In React, whenever we render an array of elements,
we need to assign a unique "key" to each one.
Anyway, if we save this page now,
you can see that it's showing "Hellblade",
in addition to the other two games we already had.
So it's automatically listing all the reviews,
based on the existing Markdown files.
Let's try clicking on an item,
just to make sure the links are working.
That's good.
Now, let's see if we can improve
the way this page looks on a larger screen.
Instead of showing the items in a column,
let's see how it works with "flex-row".
It looks better on a large screen,
but let's see what happens if
we make the window smaller.
It shrinks all the cards, which is not very nice.
We can add the "flex-wrap" class to prevent that.
This should automatically wrap the
items if there's not enough space.
If the window is large enough, it will
show all of them in a single row.
But if they don't all fit,
then it will move some of the
items to the next row.
And if there's only enough room for one item,
it effectively becomes a single column again.
So this is a simple way to automatically
arrange the items
based on the available space.
By the way, we can remove this log message now.
No need to print the full data every time.
But this is how we can automatically display
a card for each available review.