React js Mapping

Mapping Images in React js

May 08, 2022

Using the .map() method in React is a great way to render a list of elements, such as images, dynamically from an array. Here's a simple example of how to use .map() to render a set of images from an array of image URLs

import React from 'react';

const ImageGallery = () => {
  const images = [
    "https://via.placeholder.com/150",
    "https://via.placeholder.com/200",
    "https://via.placeholder.com/250",
    "https://via.placeholder.com/300",
  ];

  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      {images.map((src, index) => (
        <img
          key={index}
          src={src}
          alt={`Image ${index + 1}`}
          style={{ width: '100px', height: '100px', objectFit: 'cover' }}
        />
      ))}
    </div>
  );
};

export default ImageGallery;

Explanation

  1. images array: An array of image URLs.
  2. .map(): Iterates over each src (image URL) in the array, creating an <img> element for each.
  3. key prop: Each <img> element has a unique key based on its index. This helps React optimize rendering.
  4. Styling: Inline styles adjust the display for better layout control (optional).

Usage

Include <ImageGallery /> in your component tree, and it will render the set of images side by side. Adjust the URLs or add more to render additional images.