昨天已經了解要如何使用 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/yen-kg/pen/XWvydGB?editors=1010)，並使用 .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 | MY | [Codepen](https://codepen.io/ahmomoz/pen/raBGLQz) |
| 2 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/OPLwKdO) |
| 3 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/yyBqmZG?editors=1010) |
| 4 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/OPLwKYz) |
| 5 | han | [Codepen](https://codepen.io/iamHanCheng/pen/PwYBMvO?editors=1010)|
| 6 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/dPbjxBp) |
| 7 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/MYgBNMx) |
| 8 | Toung | [Codepen](https://codepen.io/Toung/pen/ZYzMzEd) |
| 9 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/ogvPvjY?editors=0010) |
| 10 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/vEBzBJp) |
| 11 | Amanda | [Codepen](https://codepen.io/cym199922/pen/pvzOzrM) |
| 12 | 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/mybGbXL)|
| 13 | Nocab |[CodePen](https://codepen.io/PeihanWang/pen/MYgqgBw?editors=1011)|
| 14 | 4chan| [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/KwPxPGK) |
| 15 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/xbKaxbP) |
| 16 | Noy(Toad) |[Codepen](https://codepen.io/MochiCodingPen/pen/ZYzMYPP) |
| 17 | Kaya |[Codepen](https://codepen.io/kayaribi/pen/qEWMNyJ) |
| 18 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/yyBxzjB?editors=1010) |
|19|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/vEBzeMj?editors=1010)|
| 20 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/azoaVbw?editors=0010)
| 21 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/EaYebQo?editors=0010)|
| 22 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/azoaVrj)|
| 23 | Clove | [Codepen](https://codesandbox.io/p/sandbox/94vnqy) |
| 24 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/OPLBPRN?editors=1010) |
| 25 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/vEBVVqW?editors=1011) |\
| 26 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/EaYGYvJ) |
| 27 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/mybZbXz?editors=1011) |
| 28 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/KwKPbYQ?editors=1010) |
| 29 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/zxYqVwa?editors=1010) |
| 30 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/VYwKNge?editors=1010) |
| 31 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/XJWRaye?editors=1010) |
| 32 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbOXwXx?editors=0011) |
| 33 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/azbapwr?editors=1011) |
| 34 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/wBBEyZm?editors=0010) |
| 35 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/LEVaMGL?editors=1010) |
| 36 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/ZYQOgme) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |