All language subtitles for 008 Rendering Arrays_en

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.