# 🏅 Day 18 - React 基礎練習 (3) - JSX 迴圈資料呈現

我們可以透過迴圈的方式，使用 [map 方法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/map)將陣列資料用 JSX 呈現在畫面上。

例如：

const products = [
  { title: '蘋果', id: 1 },
  { title: '香蕉', id: 2 },
  { title: '柳丁', id: 3 },
];

在大括號 {} 中，使用 map() 將產品陣列資料用 `<li>` 列出。

const listItems = (<ul>{ products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>)
 }</ul>
);

需注意使用每筆資料都要加上 **key**，key 值會是不重複的字串或數字，以辨認每筆不同的資料。通常會使用陣列資料的內容，如：每筆資料的 id。
React 會透過 key 分辨每筆資料的新增、刪除、排序。

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/eYqrrOy?editors=1010)，並撰寫 JSX 完成以下畫面：

備註：
- 畫面需求的 HTML 格式結構可以參考 HTML 中的註解。

<!-- 解答：

// 練習區塊
const element = (
  <div className="row">
    {products.map((product) => (
      <div className="card mb-3 col-4" key={product.id}>
        <img 
          src={product.imageUrl} 
          className="card-img-top primary-image" 
          alt="主圖" 
        />
        <div className="card-body">
          <h5 className="card-title">
            {product.title}
            <span className="badge bg-primary ms-2">{product.category}</span>
          </h5>
          <p className="card-text">商品描述：{product.description}</p>
          <p className="card-text">商品內容：{product.content}</p>
          <div className="d-flex">
            <p className="card-text text-secondary">
              <del>{product.origin_price}</del>
            </p>
            元 / {product.price} 元
          </div>
        </div>
      </div>
    ))}
  </div>
);
// 區塊結束

-->

| Column 1 | Column 2 |
| ----------- | ---------------------------------------------------------------------------- |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/myEVvbY) |
| 7Red | [codepen](https://codepen.io/cch2655/pen/RNRaxJB) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/wBWGpOV) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/QwENarL) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/WbxwMvQ) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/PwzNQKw?editors=0010) |
| Jin | [Codepen](https://codepen.io/Jin-L/pen/raLeJKd) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/gbMrvyr?editors=1111) |
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/XJKdZwP) |
| Owen He | [CodePen](https://codepen.io/owen1120/pen/JoKXLOj?editors=0010) |
| cks40660 | [CodePen](https://codepen.io/CKS40660/pen/yyJOKKQ) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/ZYOWxZd?editors=0010) |
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/GgqZdNd) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/ByzKJeg?editors=1011) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/wBWGjNL) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/qENZKBo?editors=1010) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/pvbyKvb?editors=0010) |
| 地瓜 | [CodePen](https://codepen.io/ChippyYU/pen/myEPKeo?editors=1011) |
| 平平 | [CodePen](https://codepen.io/ypinpin/pen/GgqZGLp) |
| 老屠 | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/raLerxQ?editors=0010) |
| wind | [CodePen](https://codepen.io/wind7y/pen/MYeyBKB) |
| Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/WbxwKpd) |
| cindy | [CodePen](https://codepen.io/a50134/pen/zxBqLMO?editors=0010) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/GgqZBeM?editors=0010) |
| FangFang | [CodePen](https://codepen.io/Fang-the-selector/pen/GgqZXoQ) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/raLeZzx?editors=1010) |
| Percy | [CodePen](https://codepen.io/Percy-Ku/pen/ByzKOVb) |
| 社子畢卡索 | [CodePen](https://codepen.io/pen?template=ZYOWMMW) |
| 小懿 | [CodePen](https://codepen.io/YT-the-vuer/pen/VYjaGQQ?editors=0110) |
| kashiwatei | [CodePen](https://codepen.io/kashiwatei/pen/LEZNqzg?editors=1011) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/jErrNzy) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/jErrOax) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/GgqqOdN) |
| jchunnn | [Codepen](https://codepen.io/jchunnn/pen/wBWWPby) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/ogLLKvb) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/gbMwypm) |
| Vergil | [CodePen](https://codepen.io/aglgvsie/pen/MYebzQE) |
| tanuki | [CodePen](https://codepen.io/tanuki320/pen/zxBwbOx?editors=1010) |
| 伊迪 | [CodePen](https://codepen.io/sorryFish/pen/KwMqEEP) |
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/RNRgmJa?editors=1010)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/WbxExOa)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/ByzmroL?editors=1010)|