React.js - Iterate through card bootstrap

Question

I am very new to React.js If I have a group of images which is 3 cards in a row and there are three rows to display on cards and between each row, there's space between. I was wondering how do I iterate through images with below card bootstrap codes,

function App() {
    return (

        <Card style={ { width: "18rem" } }>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card
                    title and make up the bulk of
                    the card 's content.
                </Card.Text>
            </Card.Body>
        </Card>
    );
}

Answer 1

if you want to show multiple cards as a list or something you can consider iterating through an array and render multiple cards as shown bellow

function App() {
  return data.map((i, index) => <CardView key={index} {...i} />);
}

const CardView = ({
  title = "Default Title",
  text = "Default Text",
  imgsrc = "default_holder.js/100px180"
}) => (
  <Card style={{ width: "18rem" }}>
    <Card.Img variant="top" src={imgsrc} />
    <Card.Body>
      <Card.Title>{title}</Card.Title>
      <Card.Text>{text}</Card.Text>
    </Card.Body>
  </Card>
);
const data = [
  {
    title: "First Title",
    text: "First Text",
    imgsrc: "firstimg.jpg"
  },
  {
    title: "second Title",
    text: "second Text",
    imgsrc: "secondimg.jpg"
  },
  {
    title: "third Title",
    text: "third Text",
    imgsrc: "thirdimg.jpg"
  }
];