使用 map function 在行和列圖像中顯示

Question

/* 我正在嘗試在名為 itemToSell 的數組 object 中顯示行和列圖像存儲，使用 map function 但不幸的是，我的圖像僅出現在列中有人可以幫助我為什么行不適用於此代碼？ 有趣的是，這是我過去使用 map function 在行和列數組 Object 中顯示的方式，這創建了不同的卡片組件並且它曾經可以工作，但這次我不知道為什么行不影響代碼！ */

const itemToSell=[
    {
        id : 1,
        img:"./Images/image1.jpg",
        Description:"Avocado",
        Price: "R30",
    },

    {
        id : 2,
        img:"./Images/image2.webp",
        Description:"Orange",
        Price: "R30",
    },

    {
        id : 3,
        img:"./Images/image3.jpeg",
        Description:"Apple",
        Price: "R30",
    },

    {
        id : 4,
        img:"./Images/image4.jpeg",
        Description:"Banana",
        Price: "R30",
    },

    {
        id : 5,
        img:"./Images/image5.jpeg",
        Description:"Mango",
        Price: "R30",
    },

    {
        id : 6,
        img:"./Images/image6.jpeg",
        Description:"Kiwi",
        Price: "R30",
    },

    {
        id : 7,
        img:"./Images/image7.jpeg",
        Description:"Waterlemon",
        Price: "R30",
    },
    {
        id : 8,
        img:"./Images/image8.jpeg",
        Description:"Apricot",
        Price: "R30",
    },

    {
        id : 9,
        img:"./Images/image9.jpeg",
        Description:"Grapes",
        Price: "R30",
    },
    
    {
        id : 10,
        img:"./Images/image10.jpeg",
        Description:"Cherry",
        Price: "R30",
    },
]

export default itemToSell

import React from 'react';
import itemToSell from './itemToSell';
import {Card,Button,Row,Col} from 'react-bootstrap';
import Container from 'react-bootstrap/Container';

function DisplayProduct() {
  const element = itemToSell.map((product,index) =>
    <div key={index}> {/*refer you key in within a div*/}
      <Col>
        {product.id} {/*Use this line of code if you wanna display your key value*/}
        <Card style={{ width: '15rem' }}>
        <Card.Img variant="top" src={product.img} />
        <Card.Body>
        <Card.Title>{product.Description}</Card.Title>
        <Button variant="primary">Add {product.Price}</Button>
        </Card.Body>
        </Card>
      </Col>
    </div>
 
  )
    return (
        <div>
          <Container>
            <Row>
              {element}
            </Row>  
          </Container>               
        </div>
    )
}
export default DisplayProduct

Answer 1

return (
        <div>
          <Container>
            <Row xs={1} md={2}>
              {element}
            </Row>  
          </Container>               
        </div>
    )

/* 在<Row>中，您需要精確定義屏幕顯示的 html 屬性； xs,md,lg,等*/