---
# System prepended metadata

title: "\U0001F3C5 Day 18 - React 基礎練習 (3) - JSX 迴圈資料呈現"
tags: [React 直播班 - 2025 冬季班]

---

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

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

例如：
```jsx=
const products = [
  { title: '蘋果', id: 1 },
  { title: '香蕉', id: 2 },
  { title: '柳丁', id: 3 },
];
```
在大括號 {} 中，使用 map() 將產品陣列資料用 `<li>` 列出。
```jsx=
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 完成以下畫面：
![image](https://hackmd.io/_uploads/SkjyA1WZ1e.png)


備註：
- 畫面需求的 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)|