昨天已經了解要如何使用 props 傳遞資料，今天來練習一個常用的技巧，也就是將陣列資料使用 .map 一一傳到元件做使用。用一個簡單的範例如下：

function Child({ data }) {
  return <li> {data} </li>
};

const numbers = [1, 2, 3, 4, 5];
numbers.map((number) =>
  <Child data={number} />
);

可以將 numbers 這個陣列一一傳到 Child 元件，並顯示資料。
比較常見的情境像是文章目錄，會把每一筆摘要（標題、圖片）等等顯示到畫面上，而畫面可能會是一張一張卡片的樣式，這時候就很適合用到這個方法，又或是 Select 的 option 選項，也可以使用此方式來處理。

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/GRxmjoZ)，並使用 .map 和 props 技巧將文章資料的標題和內文依序列出。

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

<!-- 解答：

function Child({ post }) {
  return <li> 
    <h3>{post.title} </h3> 
    <p>{post.body}</p> 
  </li>
};

function Example() {
  // posts 資料
  return (
    <div>
      <ul>
        {posts.map(post => {
          return <Child key={post.id} post={post} />
        })}
      </ul>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------- |:------------------------------------------------------ |
| 1 | Billy.Ji | [codepen](https://codepen.io/yaj55ushydna/pen/XWordPX) |
| 2 | smalljie | [codepen](https://codepen.io/smalljie/pen/GRPKZPG) |
| 3 | 金魚 | [codepen](https://codepen.io/cso-goldfish/pen/vYvBGMR) |
| 4 | 羅羅 | [codepen](https://codepen.io/bjqs02/pen/OJrLNqa) |
| 5 | Wendy3 | [codepen](https://codepen.io/wendy03/pen/BavBzWg) |
| 6 | Sui | [codepen](https://codepen.io/suihsilan/pen/YzdKWqv?editors=0010) |
| 7 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/jOXNrzq) |
| 8 | Ann Chou | [codepen](https://codepen.io/annchou_illu/pen/poqzbyj) |
| 9 | LiShang | [Codepen](https://codepen.io/LiShang/pen/OJrLXxe) |
| 10 | MotoRin | [Codepen](https://codepen.io/sakimoto/pen/PoXYzdY) |
| 11 | chichi | [Codepen](https://codepen.io/chichihuang/pen/ZEVzOmJ) |
| 12 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/MWZgexo) |
| 13 | LuLu | [Codepen](https://codepen.io/Lin-Lulu/pen/GRPKjKR?editors=1010) |
| 14 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/qBLWaxz) |
| 15 | Evan | [Codepen](https://codepen.io/evanz1215/pen/yLGBaxq) |
| 16 | Iris | [Codepen](https://codepen.io/iris831206/pen/wvRwzYq) |
| 17 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/wvRwzEq) |
| 18 | cataska | [Codepen](https://codepen.io/lovecankill/pen/KKbPgoQ) |
| 19 | yuchih | [Codepen](https://codepen.io/hijachu/pen/yLGBaZx) |
| 20 | Kaya | [Codepen](https://codepen.io/laron9486/pen/vYvByxZ) |
| 21 | yi0863 | [Codepen](https://codepen.io/YI0305/pen/MWZgJWa) |
| 22 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/QWzLdpw) |
| 23 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/eYbOgRg) |
| 24 | HanHan | [Codepen](https://codepen.io/Emma-Yang/pen/poqzRwy) |
| 25 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/oNJvBdP) |
| 26 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/QWzLdBN) |
| 27 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/YzdKqMe) |
| 28 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/WNLepoj) |
|29|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/gOZYWZK)|
| 30 | Yen |[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/OJrLpzb)|
| 31 | Ingrid |[Codepen](https://codepen.io/ingrid-chi/pen/vYvBmQp?editors=1010)|
| 32 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/KKbPmBL) |
| 33 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/zYyOzBZ) |
| 34 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/XWorgaR) |
| 35 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/vYvBZOr)
| 36 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/poqzwPg) |
|37|汪汪|[Codepen](https://codepen.io/hunwooooof/pen/BaGELpO)|
|38|ejchuang|[Codepen](https://codepen.io/EJChuang/pen/bGObRyE)|
|39|喃喃|[Codepen](https://codepen.io/VeLario/pen/qBLWjMK?editors=0010)|
|40|collinkao|[Codepen](https://codepen.io/collin0825/pen/dywbzPr)|
|41| 王偉青 | [Codepen](https://codepen.io/lovegull/pen/QWzLMLG?editors=1011) |
|42| jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/KKbPyeM?editors=1010) |
| 43 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/LYMPOag) |
| 44 | jerry456789 | [codePen](https://codepen.io/aria198a/pen/VwqZQaK?editors=1010) |
| 45 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/MWZgGaE?editors=0010) |
| 46 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/rNoBrgY) |
| 47 | David0799 | [Codepen](https://codepen.io/David0799/pen/mdabjvY) |
| 48 | shcopy | [Codepen](https://codepen.io/shcopy/pen/gOZYjBN) |
| 49 | NoZ | [Codepen](https://codepen.io/fgfjgror/pen/gOZYddw?editors=1010) |
| 50 | zona | [Codepen](https://codepen.io/w242920/pen/ExGYeGM) |
| 51 | lingchang | [Codepen](https://codepen.io/ling-chang/pen/XWorxJQ) |
| 52 | Aden | [Codepen](https://codepen.io/Osases/pen/eYbObJy) |
| 53 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/LYMPMaP)
| 54 | connieK | [Codepen](https://codepen.io/eaksloky-the-sans/pen/abPogqL) |
| 55 | azami | [Codepen](https://codepen.io/azami/pen/bGObrMR) |
| 56 | rainnping | [Codepen](https://codepen.io/rainnping/pen/VwqZoEw) |
| 57 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/QWzLKVQ) |
| 58 | Steve Tseng | [Codepen](https://codepen.io/hifly0921/pen/ExGxYWY) |
| 59 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/KKbKVGZ?editors=1010) |
| 60 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/ExGxKEa) |
| 61 | Kent | [Codepen](https://codepen.io/labkunz/pen/LYMYZMm) |
| 62 | Jasmin | [Codepen](https://codepen.io/thejasmin/pen/PoXozMM) |
| 63 | RJ | [Codepen](https://codepen.io/RJ-S/pen/QWzWdLo) |
| 64 | Cami | [Codepen](https://codepen.io/fayevivi/pen/bGOGgvX) |
| 65 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/ZEVEKQm?editors=1010) |
| 66 | Mocha | [Codepen](https://codepen.io/MochaLee/pen/wvRvqRg) |
| 67 | Liam | [Codepen](https://codepen.io/liamkkobe/pen/yLGLpjP?editors=1010) |
| 68 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/xxmKobg) |
| 69 | 妤ㄦ | [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/QWzWVZg) |
| 70 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/mdadGge) |
| 71 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/poqoOMa) |
| 72 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/qBLBJrB?editors=1010) |
| 73 | Rxzan | [Codepen](https://codepen.io/Tzuru-Chen/pen/JjwjmLd) |
| 74 | Che1z | [Codepen](https://codepen.io/Shih-Min-Hung/pen/qBLBzeo) |
| 75 | hungya | [Codepen](https://codepen.io/hungya777/pen/vYvYoLb?editors=1010)
| 76 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/qBLBeZK?editors=1011)
| 77 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/vYvYooE?editors=0010)
| 78 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/GRPKQJm) |
| 79 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/mdayyVo?editors=1010) |
| 80 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/JjwopXV) |
| 81 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/RwEwPbR) |
| 82 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/LYMEKVN?editors=1010) |
| 83 | curry | [Codepen](https://codepen.io/Ted19851223/pen/BavNzZV?editors=1010) |
| 85 | Ken | [Codepen](https://codepen.io/Ken720053/pen/wvRagJX) |
| 86 | Yiren | [Codepen](https://codepen.io/Yiren_Liou/pen/YzdXNRE) |
| 87 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/BavNdGy?editors=0010) |
| 88 | Tian | [Codepen](https://codepen.io/ccyy915/pen/vYvOWgm) |
| 89 | Overy |[Codepen](https://codepen.io/tupbsair-the-vuer/pen/PoXPdXg?editors=0011)|
| 90 | Carey#1010 |[Codepen](https://codepen.io/Leo4077/pen/VwqvVJb)|
| 91 | Owen | [Codepen](https://codepen.io/owen-dong/pen/jOXWrrY?editors=1010) |
| 92 | DavidTsai | [Codepen](https://codepen.io/David-Tsai/pen/VwqaYBM?editors=0010) |
| 93 | Jujube | [Codepen](https://codepen.io/tendayling/pen/yLGJNxa) |
| 94 | EdHsu | [Codepen](https://codepen.io/Ed-Hsu/pen/wvRWXYL) |
| 95 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/gOqOzbg) |
| 96 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/NWozPOY)|

| 0 | user | [Codepen]() |