---
# System prepended metadata

title: "\U0001F3C5 Day 3｜JSX 迴圈資料呈現"
tags: [2023 React 入門攻略工作坊]

---

我們可以透過迴圈的方式，使用 [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/hexschool/pen/abQPzbV?editors=1010)，並撰寫 JSX 完成以下畫面：
![](https://hackmd.io/_uploads/Bks7I80Yn.png)


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



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
// 練習區塊
const userList =  <ul class="list">
        {users.map(user =>  (<li key={user.id}><div class="card">
          <img src={user.avatar} alt={formatName(user)}/>
          <div class="content">
            <h3><b>{formatName(user)}</b></h3>
            <p>{user.description}</p>
            </div>
      </div> </li>))}
</ul>;
// 區塊結束
```
-->

回報區

---

|  #  |    Discord     |                                  CodePen / 答案                                  |
|:---:|:--------------:|:--------------------------------------------------------------------------------:|
| 01  |     Wendy3     |                [Codepen](https://codepen.io/wendy03/pen/RwqmWBR)                 |
| 02  |      AYA       |               [Codepen](https://codepen.io/NoNameNote/pen/poQmjVV)               |
| 03  |      圈圈      |     [Codepen](https://codepen.io/wjejfczn-the-bold/pen/vYQwNPX?editors=0010)     |
| 04  |    rChinnnn    |                [Codepen](https://codepen.io/rChinnnn/pen/LYXopOw)                |
| 05  |    Billy.Ji    |              [Codepen](https://codepen.io/yaj55ushydna/pen/vYQwNbK)              |
| 06  |   BalaBambe    |               [Codepen](https://codepen.io/bambe-chen/pen/oNQRjKb)               |
| 07  |     Kyrie      |            [Codepen](https://codepen.io/KyrieHaveGoodDay/pen/QWJRjex)            |
| 08  |     chichi     |              [Codepen](https://codepen.io/chichihuang/pen/XWywXWL)               |
| 09  |    MotoRin     |         [Codepen](https://codepen.io/sakimoto/pen/RwqmrrV?editors=1010)          |
| 10  |    Ann Chou    |              [Codepen](https://codepen.io/annchou_illu/pen/ExOzVGz)              |
| 11  |     Berlin     |                [Codepen](https://codepen.io/3qberlin/pen/oNQRjRj)                |
| 12  |    LiShang     |                [Codepen](https://codepen.io/LiShang/pen/PoxvZPO)                 |
| 13  |      LuLu      |         [Codepen](https://codepen.io/Lin-Lulu/pen/bGQyVya?editors=0010)          |
| 14  |      Aden      |                 [Codepen](https://codepen.io/Osases/pen/WNYBrEY)                 |
| 15  |    LinaChen    |                [Codepen](https://codepen.io/LinaChen/pen/dyQEGzv)                |
| 16  |      Sui       |         [Codepen](https://codepen.io/suihsilan/pen/RwqmrpZ?editors=0010)         |
| 17  |     yi0863     |          [Codepen](https://codepen.io/YI0305/pen/yLQWYQx?editors=0010)           |
| 18  |      大頭      |         [Codepen](https://codepen.io/d22495521/pen/PoxvZea?editors=1010)         |
| 19  |      Tami      |           [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/YzRbwOE)            |
| 20  |     Rochel     |      [Codepen](https://codepen.io/rochelwang1205/pen/bGQyEzz?editors=1010)       |
| 21  |     yuchih     |          [Codepen](https://codepen.io/hijachu/pen/BaGejrO?editors=1010)          |
| 22  | stevenchang421 |                [Codepen](https://codepen.io/vwtrpqmm/pen/rNQgxge)                |
| 23  |    Wei_Rio     |                 [Codepen](https://codepen.io/wei_wu/pen/XWywXZb)                 |
| 24  |  ChaosTu#9311  |          [Codepen](https://codepen.io/torotu/pen/ExOzKYZ?editors=1010)           |
| 25  |      Eden      |                 [Codepen](https://codepen.io/iseden/pen/qBQGbGj)                 |
| 26  |      Leo       |               [Codepen](https://codepen.io/Aruminiya/pen/vYQwGOr)                |
| 27  |    toshow.     |          [Codepen](https://codepen.io/toshow/pen/wvQbGgV?editors=1010)           |
| 28  |    cataska     |              [Codepen](https://codepen.io/lovecankill/pen/ZEmNWre)               |
| 29  |      羅羅      |                 [Codepen](https://codepen.io/bjqs02/pen/poQmyey)                 |
| 30  |      Andy      |                [Codepen](https://codepen.io/jrprzwsj/pen/rNQgLmr)                |
| 31  |   collinkao    |               [Codepen](https://codepen.io/collin0825/pen/RwqmRGN)               |
| 32  |      汪汪      |               [Codepen](https://codepen.io/hunwooooof/pen/BaGELpO)               |
| 33  |      Kent      |          [Codepen](https://codepen.io/labkunz/pen/YzRbWaX?editors=1010)          |
| 34  |   Winnie7033   |        [Codepen](https://codepen.io/chou-winnie/pen/gOQJMPa?editors=1010)        |
| 35  |      aray      |  [Codepen](https://codepen.io/ceqchksj-the-flexboxer/pen/jOQorJx?editors=1010)   |
| 36  |  davidchengtw  |               [Codepen](https://codepen.io/davidcheng/pen/mdQYrrM)               |
| 37  |    smalljie    |                [Codepen](https://codepen.io/smalljie/pen/XWywjbL)                |
| 38  |   泊岸#3466    |        [Codepen](https://codepen.io/qoq77416416/pen/VwVOjxL?editors=1010)        |
| 39  |   ryan.chou    |                [Codepen](https://codepen.io/csw8524/pen/bGQyBEP)                 |
| 40  |     HanHan     |               [Codepen](https://codepen.io/Emma-Yang/pen/PoxvGgy)                |
| 41  |     sylvia     |          [Codepen](https://codepen.io/aqrerdxo-the-sasster/pen/GRwaNOe)          |
| 42  |   David0799    |               [Codepen](https://codepen.io/David0799/pen/RwqmorY)                |
| 43  |    shangchu    |              [Codepen](https://codepen.io/shangchu0412/pen/MWzdaOX)              |
| 44  |      NoZ       |         [Codepen](https://codepen.io/fgfjgror/pen/ExOzNME?editors=0010)          |
| 45  |      便當      |       [Codepen](https://codepen.io/wafjxnde-the-typescripter/pen/XWywNgR)        |
| 46  |      瑀君      |                [Codepen](https://codepen.io/yennnnn/pen/QWJRddg)                 |
| 47  |      Yen       |       [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/NWEVdKR?editors=0010)       |
| 48  |    HsienLu     |          [Codepen](https://codepen.io/Hsienlu/pen/MWzdyojeditors=0010)           |
| 49  |      阿旭      |          [Codepen](https://codepen.io/koei-lu/pen/JjeqWGd?editors=1010)          |
| 50  |  jerry456789   |         [Codepen](https://codepen.io/aria198a/pen/LYXoWNN?editors=1010)          |
| 51  |      Iris      |        [Codepen](https://codepen.io/iris831206/pen/JjeqWEG?editors=1010)         |
| 52  |  Melody#7746   |          [Codepen](https://codepen.io/jkmqhedd-the-sasster/pen/OJaYWwp)          |
| 53  |    Amberhh     |          [Codepen](https://codepen.io/Amberhh/pen/qBQGmdP?editors=0010)          |
| 54  |     May L      |                [Codepen](https://codepen.io/may7243/pen/PoxvmBM)                 |
| 55  |      Liam      |               [Codepen](https://codepen.io/liamkkobe/pen/poQmRpa)                |
| 56  |  jasperlu005   |   [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/dyQEWqg?editors=1010)    |
| 57  |     王偉青     |         [Codepen](https://codepen.io/lovegull/pen/eYQaWMW?editors=1010)          |
| 58  |   rainnping    |               [Codepen](https://codepen.io/rainnping/pen/RwqmVQv)                |
| 59  |     Daphne     |        [Codepen](https://codepen.io/DaphneShen/pen/wvQbqgj?editors=0010)         |
| 60  |    ejchuang    |                [Codepen](https://codepen.io/EJChuang/pen/qBQGXLr)                |
| 61  |    besspeng    |        [Codepen](https://codepen.io/besspengcl/pen/YzRbraR?editors=1010)         |
| 62  |      Tian      |                [Codepen](https://codepen.io/ccyy915/pen/MWzdEBp)                 |
| 63  |     JJ Wu      |          [Codepen](https://codepen.io/jesswu/pen/poQmbJr?editors=1010)           |
| 64  |    變羊魔法    |               [Codepen](https://codepen.io/cssf998811/pen/zYMQEXR)               |
| 65  |   JohnChien    |         [Codepen](https://codepen.io/glqwazid-the-selector/pen/dyQEpmW)          |
| 66  |       WA       |                 [Codepen](https://codepen.io/ldddl/pen/ZEmNawq)                  |
| 67  |   Sebastian    |              [Codepen](https://codepen.io/SebastianWei/pen/oNQRoOX)              |
| 68  |   PeterChung   |               [Codepen](https://codepen.io/tsang6187/pen/jOQoYpJ)                |
| 69  |   lingchang    |               [Codepen](https://codepen.io/ling-chang/pen/VwVOBpJ)               |
| 70  |    billy_ti    |          [Codepen](https://codepen.io/Ti-Show/pen/NWEVLXL?editors=1011)          |
| 71  |      Lin       |         [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/zYMQmNZ)         |
| 72  |       CG       |   [Codepen](https://codepen.io/qzmnczik-the-decoder/pen/Poxvzmz?editors=1010)    |
| 73  |      zona      |          [Codepen](https://codepen.io/w242920/pen/MWzdZRg?editors=1010)          |
| 74  |    kuanju27    |               [Codepen](https://codepen.io/Eero-Chiao/pen/MWzdRqN)               |
| 75  |     地球儀     |        [Codepen](https://codepen.io/dayday1222/pen/yLQWWYy?editors=1010)         |
| 76  |    ssshane     |        [Codepen](https://codepen.io/sam6091260/pen/dyQEBXr?editors=0110)         |
| 77  |     azami      |                 [Codepen](https://codepen.io/azami/pen/rNQgXBP)                  |
| 78  |     syuan      |         [Codepen](https://codepen.io/Syuan-Lin/pen/oNQRKxj?editors=0010)         |
| 79  |      喃喃      |                [Codepen](https://codepen.io/VeLario/pen/xxQobbv)                 |
| 80  |     Ingrid     |        [Codepen](https://codepen.io/ingrid-chi/pen/GRwbpgV?editors=1010)         |
| 81  |     wendy      |               [codepen](https://codepen.io/siaochanwu/pen/GRwbqEg)               |
| 82  |   Nikki.Kang   |               [codepen](https://codepen.io/Nikki-Kang/pen/GRwbNqB)               |
| 83  |     shcopy     |                 [Codepen](https://codepen.io/shcopy/pen/mdQZOgo)                 |
| 84  |      Cami      |         [Codepen](https://codepen.io/fayevivi/pen/gOQNmoG?editors=1010)          |
| 85  |  Johnson3669   | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/qBQzPqj?editors=1010) |
| 86  |      金魚      |              [Codepen](https://codepen.io/cso-goldfish/pen/dyQBVrj)              |
| 87  |       RJ       |           [Codepen](https://codepen.io/RJ-S/pen/MWzMEzj?editors=1010)            |
| 88  |     jia yu     |          [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWzMOvE)          |
| 89  |     Carole     |        [Codepen](https://codepen.io/s892261118/pen/MWzMOXr?editors=1010)         |
| 90  |   yoyo#2678    |  [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/vYQqaeq?editors=1011)   |
| 91  |      Kaya      |               [Codepen](https://codepen.io/laron9486/pen/bGQPrvM)                |
| 92  |  joanhui#9261  |                [Codepen](https://codepen.io/Joanhui/pen/oNQrmdp)                 |
| 93  |     黃士桓     |             [codePen](https://codepen.io/shr-huan-huang/pen/LYXKaqv)             |
| 94  |    jiun7523    |         [Codepen](https://codepen.io/jiun-jiun/pen/xxQoNRR?editors=1010)         |
| 95  |      妤ㄦ      |     [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/poQXmrz?editors=1010)     |
| 96  |      精靈      |   [Codepen](https://codepen.io/vesbexih-the-bashful/pen/MWzMNNM?editors=1010)    |
| 97  |     Overy      |     [Codepen](https://codepen.io/tupbsair-the-vuer/pen/zYMgYrE?editors=1010)     |
| 98  |     Che1z      |       [Codepen](https://codepen.io/Shih-Min-Hung/pen/oNQKgzN?editors=0010)       |
| 99  |     Alice      |               [Codepen](https://codepen.io/AliceZhao/pen/PoxMPRw)                |
| 100 |     SkyWoW     |          [Codepen](https://codepen.io/WoW-Sky/pen/XWyvmKe?editors=1010)          |
| 101 |      SKey      |               [Codepen](https://codepen.io/Dale-Chien/pen/gOQVLMe)               |
| 102 |      Evan      |               [Codepen](https://codepen.io/evanz1215/pen/ExOqWgr)                |
| 103 |  PollyPO_Lee   |              [Codepen](https://codepen.io/pollypo1986/pen/RwqXpYK)               |
| 104 |      Kai       |        [Codepen](https://codepen.io/kaicheng928/pen/xxQvdGZ?editors=1010)        |
| 105 |  Steve Tseng   |               [Codepen](https://codepen.io/hifly0921/pen/abQeWEB)                |
| 106 |    Anderson    |       [Codepen](https://codepen.io/goodmanbuild/pen/qBQeVrK?editors=1010)        |
| 107 |   d05220725    |              [Codepen](https://codepen.io/NICK20190621/pen/poQMdxw)              |
| 108 |     Rxzan      |               [Codepen](https://codepen.io/Tzuru-Chen/pen/zYMgWBd)               |
| 109 |    Ataraxia    |              [Codepen](https://codepen.io/ataraxia8888/pen/rNQgbNP)              |
| 110 |     Jie016     |                [Codepen](https://codepen.io/Jie-Kuo/pen/poQmqbx)                 |
| 111 |      大衛      |         [Codepen](https://codepen.io/exnsrpjc/pen/dyQxLeo?editors=0010)          |
| 112 |      Cami      |                [Codepen](https://codepen.io/irisLife/pen/gOQVNaq)                |
| 113 |    connieK     |        [Codepen](https://codepen.io/plkang3617/pen/jOXNMEm?editors=1010)         |
| 114 |   PoWei#8484   |     [Codepen](https://codepen.io/harrison-wei-lai/pen/gOZYmBg?editors=1010)      |
| 115 |      Yin       |        [Codepen](https://codepen.io/andy888jam/pen/jOXNGBQ?editors=1010)         |
| 116 |     Jasmin     |               [Codepen](https://codepen.io/thejasmin/pen/PoXYxbX)                |
| 117 |     Daphne     |        [Codepen](https://codepen.io/DaphneShen/pen/MWZgZKE?editors=0010)         |
| 118 |      owen      |         [Codepen](https://codepen.io/owen-dong/pen/PoXYVqj?editors=0010)         |
| 119 |   小明#4408    |          [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/JjwPgoB)          |
| 120 |   Emily4869    |       [Codepen](https://codepen.io/aptx4869Emily/pen/MWZWgXM?editors=1010)       |
| 121 |     Mocha      |         [Codepen](https://codepen.io/MochaLee/pen/JjwjjLM?editors=1010)          |
| 122 |     hungya     |               [Codepen](https://codepen.io/hungya777/pen/mdaddjv)                |
| 121 |   Carey#1010   |                [Codepen](https://codepen.io/Leo4077/pen/KKbKapj)                 |
| 122 |     Ed Hsu     |          [Codepen](https://codepen.io/Ed-Hsu/pen/eYbYePg?editors=1010)           |
| 123 |     curry      |              [Codepen](https://codepen.io/Ted19851223/pen/wvRBrag)               |
| 124 |      Nisa      |          [Codepen](https://codepen.io/Nisa491/pen/zYyxpmj?editors=1010)          |
| 125 |    Feng-Lin    |              [Codepen](https://codepen.io/fenglin0115/pen/xxmbmzz)               |
| 126 |  SaturnXVIII   |              [Codepen](https://codepen.io/SaturnXVIII/pen/YzdPBaw)               | 
| 127 | Yiren | [Codepen](https://codepen.io/Yiren_Liou/pen/zYyGKKw) |
| 128 | Ken | [Codepen](https://codepen.io/Ken720053/pen/JjwdbJV) |
| 129 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/vYvOWOy?editors=1010) |
| 130 | DavidTsai | [Codepen](https://codepen.io/David-Tsai/pen/ZEVbMxW?editors=0010) |
| 131 | Jujube | [Codepen](https://codepen.io/tendayling/pen/gOZMOKr?editors=1010) |
| 132 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/poqNbmP) |
---

- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
