我們可以透過迴圈的方式，使用 [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/hexschool/pen/abQPzbV?editors=1010)，並撰寫 JSX 完成以下畫面：

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

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

<!-- 解答：

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

- 快速複製格式：

| 0 | user | [Codepen]() |