React js Mapping

Mapping() With Images in React js

August 17, 2022

In React, you can use the .map() function to dynamically generate components for each item in an array. If you have multiple values and images to display, you can create an array of objects, where each object represents a single item with its values and image, and then map over this array to render the corresponding components.

Here’s a basic example:

import React from 'react';

// Sample data array with multiple values and image URLs
const data = [
  {
    id: 1,
    title: 'Item 1',
    description: 'This is the first item',
    imageUrl: 'https://via.placeholder.com/150',
  },
  {
    id: 2,
    title: 'Item 2',
    description: 'This is the second item',
    imageUrl: 'https://via.placeholder.com/150',
  },
  {
    id: 3,
    title: 'Item 3',
    description: 'This is the third item',
    imageUrl: 'https://via.placeholder.com/150',
  },
];

const App = () => {
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}
        style={
          {
            border: '1px solid #ccc',
            padding: '16px',
            marginBottom: '16px'
            }}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
          <img src={item.imageUrl} alt={item.title}
          style={
            {
              width: '150px',
              height: '150px'
              }} />
        </div>
      ))}
    </div>
  );
};

export default App;

Explanation

  1. Data Array: Each item in data has multiple fields: id, title, description, and imageUrl.
  2. Map Function: In the App component, the .map() function iterates over each item in data.
  3. Rendering: For each item, it creates a <div> that displays the title, description, and image.

Styling and Structure

You can use inline styling as shown here or apply CSS classes for more complex styling. Each item should have a unique key (e.g., id) for React to optimize re-rendering.

This structure can be easily expanded by adding more values to each item object (e.g., price, author, etc.) and adjusting the JSX inside the .map() accordingly.