How to Create an Image Gallery in React: Simple Guide

To create an image gallery in React, use a functional component that maps over an array of image URLs and renders them inside <img> tags. Use CSS Flexbox or Grid for layout and React state if you want interactive features like selection or modal views.

Syntax

An image gallery in React typically uses a functional component that returns a container element holding multiple <img> elements. You map over an array of image URLs to generate each image element dynamically.

Use CSS classes to style the gallery container and images for layout and responsiveness.

jsx

function ImageGallery({ images }) {
  return (
    <div className="gallery">
      {images.map((url, index) => (
        <img key={index} src={url} alt={`Gallery image ${index + 1}`} />
      ))}
    </div>
  );
}

Output

A container with multiple images displayed in a row or grid depending on CSS styling.

Example

This example shows a simple React image gallery that displays images in a responsive grid. It uses a functional component and CSS Grid for layout.

jsx

import React from 'react';
import './Gallery.css';

const images = [
  'https://via.placeholder.com/150/92c952',
  'https://via.placeholder.com/150/771796',
  'https://via.placeholder.com/150/24f355',
  'https://via.placeholder.com/150/d32776',
  'https://via.placeholder.com/150/f66b97',
  'https://via.placeholder.com/150/56a8c2'
];

function ImageGallery() {
  return (
    <main>
      <h1>Simple React Image Gallery</h1>
      <section className="gallery">
        {images.map((url, index) => (
          <img key={index} src={url} alt={`Image ${index + 1}`} />
        ))}
      </section>
    </main>
  );
}

export default ImageGallery;

Output

A page with a heading and a grid of six images displayed evenly with spacing.

Common Pitfalls

• Not adding a unique key prop when mapping images causes React warnings and inefficient updates.
• Forgetting alt text on images hurts accessibility.
• Using fixed widths without responsive CSS can break layout on small screens.
• Loading too many large images without optimization slows page load.

jsx

/* Wrong: Missing key and alt attributes */
function GalleryWrong({ images }) {
  return (
    <div>
      {images.map(url => (
        <img src={url} alt="" />
      ))}
    </div>
  );
}

/* Right: Add key and alt for accessibility */
function GalleryRight({ images }) {
  return (
    <div>
      {images.map((url, index) => (
        <img key={index} src={url} alt={`Image ${index + 1}`} />
      ))}
    </div>
  );
}

Quick Reference

• Use functional components with map() to render images.
• Always add a unique key prop when rendering lists.
• Include descriptive alt text for accessibility.
• Use CSS Grid or Flexbox for responsive layouts.
• Optimize image sizes for faster loading.

Key Takeaways

Use a functional React component that maps over an array of image URLs to create the gallery.

Always provide a unique key and alt text for each image for React performance and accessibility.

Use CSS Grid or Flexbox to create a responsive and neat layout for images.

Optimize image sizes to improve page load speed and user experience.

Test your gallery on different screen sizes to ensure it looks good everywhere.