Map data in react bootstrap card component, using Map method

 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.