Positioning when mapping over array


How can I put the title below the image?

          {images.map(image => (
            <a href={image.link}>
              <img src={image.url} />


I tried doing a <br/> after the image but that creates one image per row, when I want the images all on one row with each title beneath.

div.container-for-images {
  display: flex;
  flex-flow: row wrap;

a.image-wrapper {
  width: calc(100% / 3);

thanks for this.

I don’t quite get what the dots are doing here, is there a related area of the curriculum I could look at?

What do you mean by the dots?

where you’ve written div.container

That’s CSS, like .this-is-a-class which would select something like <div className="this-is-a-class" >. I’ve written it explicitly like div.this-is-a-class because you didn’t put any classes on

so in the css file, you would just do

.container-for-images {
  display: flex;
  flex-flow: row wrap;

then in the component do:

<div className = "container-for-images">

I have seen dot notation (div.something) used just once before in CSS and don’t really get how it works.

That’s how CSS works. You say normally in HTML:

<div class="a-class">

Or in JSX, because class is a reserved word:

<div className="a-class">

Then in CSS anything under

.a-class {

Applies to that class.

This is literally 99% of usage of CSS. Add a class to an HTML element, apply styles to that element.

Yes. IDs are used sometimes too, but classes most common. :slight_smile:

yeah, I get that. That’s what I’m used to, I didn’t get why you were doing dot notation with div.class like that. But it’s fine - thanks.