How to iterate images on React?

Question

Well, the question is very self-explanatory. I have this code here (inside a render, of course):

const images = [('http://placehold.it/100x100/76BD22'), ('http://placehold.it/100x100/76BD23')];

// ProductPage Views 
const ProductPageView = 
  <section className="page-section ps-product-intro">
    <div className="container">
      <div className="product-intro">
        <div className="product-intro__images">
          <div className="product-gallery">
            <ul className="product-gallery-thumbs__list">
              {images.map(function(image, imageIndex){
                return <li key={ imageIndex }>{image}</li>;
              })}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

The thing is I don't know how to iterate those images on the array. What's wrong with my code?

Answer 1

I assume you want to display them as images, right? You should use img tag then.

<ul className="product-gallery-thumbs__list">
   {images.map(function(image, imageIndex){
      return <img key={ imageIndex } src={ image } />
   })}
</ul>

Answer 2

Your array is an array of image URLs, not image tags. So your code is close but you need to put the image inside of an image tag inside of your list item tag.

const images = [('http://placehold.it/100x100/76BD22'), ('http://placehold.it/100x100/76BD23')];
// ProductPage Views 

const ProductPageView = 
  <section className="page-section ps-product-intro">
    <div className="container">
      <div className="product-intro">
        <div className="product-intro__images">
          <div className="product-gallery">
            <ul className="product-gallery-thumbs__list">
              {images.map(function(imageSrc) {
                return (
                  <li key={ imgSrc }>
                    <img src={ imgSrc } />
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

I would also recommend against using an array index as a key in general. The imgSrc is unique so it would make a good key here.

Also, make sure to include an alt attribute on the img for screen readers. You might want to make your array like this:

const images = [
  { src: 'http://placehold.it/100x100/76BD22', alt: 'Your description here 1' }, 
  { src: 'http://placehold.it/100x100/76BD23', alt: 'Your description here 2' }
];

// ...

{images.map(function(imageProps) {
  return (
    <li key={ imageProps.src }>
      <img src={ imageProps.src } alt={ imageProps.alt } />
    </li>
  );
})}