React js Mapping

Map data in react bootstrap card component, using Map method

July 17, 2019

 To map data in a React Bootstrap card component, you can use the JavaScript map() function to dynamically render an array of data into multiple Card components. Below is an example:


import React from 'react';
import { Card, Row, Col } from 'react-bootstrap';

const data = [
  { id: 1, title: 'Card 1',
    text: 'This is the first card.',
    imgUrl: 'https://via.placeholder.com/150' },
  { id: 2, title: 'Card 2',
    text: 'This is the second card.',
    imgUrl: 'https://via.placeholder.com/150' },
  { id: 3, title: 'Card 3',
    text: 'This is the third card.',
    imgUrl: 'https://via.placeholder.com/150' },
];

const CardList = () => {
  return (
    <Row xs={1} sm={2} md={3} className="g-4">
      {data.map((item) => (
        <Col key={item.id}>
          <Card>
            <Card.Img
                variant="top"
                src={item.imgUrl}
                alt={item.title} />
            <Card.Body>
              <Card.Title>{item.title}</Card.Title>
              <Card.Text>{item.text}</Card.Text>
            </Card.Body>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default CardList;

Explanation:

  1. Data Array:
    The data array contains objects with information like id, title, text, and imgUrl.

  2. Bootstrap Grid:

    • Row and Col components from React Bootstrap are used for responsive layout.
    • The xs, sm, and md props define the number of columns on different screen sizes.

  3. Mapping Data:

    • The map() function iterates over the data array and creates a Card for each object.
    • The key prop is added to each Col to ensure unique identification of elements.

  4. Card Components:

    • Each Card displays an image, title, and text dynamically based on the array data.

  5. Styling:
    The g-4 class adds spacing between the cards.

Output:

This code will render a responsive grid of cards, each populated with data from the data array. You can customize the content and styles as needed.