我們可以透過迴圈的方式，使用 [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 中的註解。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// 練習區塊
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>
);
// 區塊結束

-->

回報區
---

| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 1 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/xbKpLNa?editors=1011)|
| 2 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/jENYoYa) |
| 3 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/OPLzYdm) |
| 4 | han | [Codepen](https://codepen.io/iamHanCheng/pen/jENYoeZ?editors=1010) |
| 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/WbedBWM) |
| 6 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/NPKXVVX) |
| 7 | Satar | [CodePen](https://codepen.io/SatarKuo/pen/ByBJgjJ?editors=0110)|
| 8 | GAVI | [CodePen](https://codepen.io/qbafldcv-the-scripter/pen/WbedqxK?editors=1010)|
| 9 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/azoEgOo?editors=1011)|
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/KwPZjWb?editors=1010) |
| 11 | lobinda | [Codepen](https://codepen.io/Lobinda/pen/mybpZax) |
|12|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/JoPMgZL?editors=1010)|
|13|Aaron 謝宗佑|[CodePen](https://codepen.io/aaron-hsieh/pen/ZYzrzEa)|
| 14 | Toung | [Codepen](https://codepen.io/Toung/pen/QwLaXZo) |
| 15 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/vEBdYXx) |
| 16 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/gbYvbey) |
| 17 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/pvzaJqV) |
| 18 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/gbYvYEg) |
| 19 | MY | [Codepen](https://codepen.io/ahmomoz/pen/wBwqKvL) |
| 20 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/OPLQNxX?editors=1010) |
| 21 |邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/xbKYdzB?editors=1010)|
| 22 |Johnson |[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/gbYvGQw)|
| 23 | Amanda | [Codepen](https://codepen.io/cym199922/pen/NPKyMqJ) |
| 24 | Clove_墨 | [Codepen](https://codesandbox.io/p/sandbox/vdg7rh) |
| 25 | 爆漿 | [Codepen](https://codepen.io/nvdwwlbx-the-vuer/pen/WbezjKR?editors=1111) |
| 26 | Rogan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/WbedBWM?editors=1010) |
| 27 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/RNbMXYJ) |
| 28 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/XJrqqWL?editors=0010) |
| 29 | 阿佑 | [Codepen](https://codepen.io/ans9323052/pen/WbeJKRO) |
| 30 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/zxOjQQW?editors=1010) |
| 31 | Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/yyBEmXQ?editors=0010)|
| 32 | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/bNbxoKO?editors=0010) |
| 33 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/RNbebOM?editors=0010)|
| 34 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/ogvRyWp?editors=1010) |
| 35 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/jEOOyMj?editors=1010) |
| 36 | yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/raNaoPp?editors=1010) |
| 37 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/LEYVLbG?editors=0011) |
| 38 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/XJWdwEM?editors=1010) |
| 39 | 郭芙蘭| [Codepen](https://codepen.io/flora_Kuo/pen/MYWjpgQ?editors=0011) |
| 40 | KOMATSU PEI| [Codepen](https://codepen.io/Komatsu2021/pen/EaxgWXM?editors=1010) |
| 41 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/zxYamxW?editors=1010) |
| 42 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/bNGzqgg?editors=1010) |
| 43 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/raxOrvm) |

<br>

- 快速複製格式：

| 0 | user | [Codepen]() |