---
# System prepended metadata

title: "\U0001F3C5 Day 10 ｜元件陣列資料 props 傳遞"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
昨天已經了解要如何使用 props 傳遞資料，今天來練習一個常用的技巧，也就是將陣列資料使用 .map 一一傳到元件做使用。用一個簡單的範例如下：
```jsx=
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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
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 post={post} />
        })}
      </ul>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);
```
-->


回報區
---


|         Discord         |                                CodePen / 答案                                |
|:-----------------------:|:----------------------------------------------------------------------------:|
|        Rice#8043        |       [CodePen](https://codepen.io/riecball/pen/VwXMzxg?editors=1010)        |
|      Eric Su#7798       |               [CodePen](https://codepen.io/wc-su/pen/bGvjppM)                |
|      Vita Ora#4585      |      [CodePen](https://codepen.io/showlovezz/pen/LYdJOom?editors=0010)       |
|     DIANAxAKKO#4298     |       [Codepen](https://codepen.io/redfire29/pen/NWYLwQq?editors=0010)       |
|       布魯諾#7239       |       [Codepen](https://codepen.io/bruno-yu/pen/vYRzWqv?editors=1011)        |
|    真．穎旻粉撕#4995    |              [Codepen](https://codepen.io/gbnbihif/pen/GRxXObL)              |
|       huch09#1426       |         [Codepen](https://codepen.io/subarashii-huch09/pen/rNdZpVz)          |
|        Ayre#0016        |      [Codepen](https://codepen.io/yichunlin09/pen/qBoMpEK?editors=0010)      |
|        棒腿#9350        |       [Codepen](https://codepen.io/frankHsu/pen/LYdJeVB?editors=0010)        |
|       JarDar#6980       |             [codepen](https://codepen.io/jardarpen/pen/xxWapRz)              |
|         C#4593          |              [CodePen](https://codepen.io/ShaniMa/pen/MWVqrpv)               |
|       yunyun#5215       |             [CodePen](https://codepen.io/yun_yunni/pen/mdxGpjy)              |
|       AllenW#1132       |        [CodePen](https://codepen.io/AllenW/pen/yLKxpab?editors=1011)         |
|        yuyu#6310        |       [CodePen](https://codepen.io/yuyu0905/pen/QWmVaqd?editors=1011)        |
|        L0F0#8733        |         [CodePen](https://codepen.io/l0f0/pen/ExEeobp?editors=0010)          |
|       Morris#8755       |       [Codepen](https://codepen.io/morrisss/pen/abYaEoE?editors=1010)        |
|      ChloeLo#4858       |              [CodePen](https://codepen.io/chloelo/pen/zYWJpPa)               |
|        RON#2813         |               [CodePen](https://codepen.io/Ron115/pen/eYMLyVV)               |
|     Vada Chen#2055      |       [CodePen](https://codepen.io/vadachen/pen/KKoxZga?editors=1010)        |
| React-慧茹(拉拉醬)#3414 |           [CodePen](https://codepen.io/lala-lee-jobs/pen/abYaEMX)            |
|       露易莎#7673       |      [Codepen](https://codepen.io/louisa-lin/pen/abYaEEa?editors=1011)       |
|        SHIN#6075        |              [Codepen](https://codepen.io/shin9626/pen/oNqPEvv)              |
|   Carolkiki2003#7399    |              [Codepen](https://codepen.io/riecball/pen/VwXMzxg)              |
|     hiYifang #0736      |              [Codepen](https://codepen.io/hiYifang/pen/OJvozKW)              |
|        LEO#7779         |              [Codepen](https://codepen.io/nekorice/pen/GRxXyQg)              |
|       YuZhun#1362       |        [Codepen](https://codepen.io/danzhun/pen/poLOaRZ?editors=0110)        |
|     Bumble幫啵#0255     |        [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/jOzvZPZ)        |
|         hw#0715         |               [Codepen](https://codepen.io/Lhwei/pen/bGvxaeV)                |
|       HedgehogKU        |     [CodePen](https://codepen.io/hedgehogkucc/pen/ExEeQoY?editors=1010)      |
|         Wu#0167         |      [CodePen](https://codepen.io/Xander0705/pen/MWVqQmz?editors=1111)       |
|      rainbow#3329       |      [CodePen](https://codepen.io/g901612002/pen/JjLapwX?editors=1011)       |
|         翔#0859         |            [CodePen](https://codepen.io/energy95272z/pen/gOedvyv)            |
|       Yanyan#3555       |      [Codepen](https://codepen.io/wei-yi-lee/pen/ZExMxzz?editors=1010)       |
|        Neal#0665        |        [Codepen](https://codepen.io/neallkf/pen/eYMLMJN?editors=0010)        |
|     Robert Lo#9653      |       [Codepen](https://codepen.io/Robert-Lo/pen/QWmVQeY?editors=1010)       |
|      LinaChen#1796      |              [Codepen](https://codepen.io/LinaChen/pen/MWVqQgX)              |
|       EvaLin#4546       |      [Codepen](https://codepen.io/evalin0316/pen/wvmEmMQ?editors=1010)       |
|       黃士桓#7654       |           [codePen](https://codepen.io/shr-huan-huang/pen/vYRzRZR)           |
|      山貓(焜)#7041      |               [codePen](https://codepen.io/nopeta/pen/dymqmJd)               |
|        威爾#1694        |              [CodePen](https://codepen.io/WILL_Wu/pen/QWmVmrL)               |
|       wenyun#2362       |       [CodePen](https://codepen.io/wenyuncc/pen/qBoMoeY?editors=0011)        |
|           Ada           |       [codePen](https://codepen.io/zggsoagv-the-scripter/pen/yLKxjBV)        |
|        無名#6427        |        [codePen](https://codepen.io/Nomoney/pen/abYaGdY?editors=1010)        |
|        Mao#5230         |       [codePen](https://codepen.io/taomaomao/pen/abYaKOx?editors=0010)       |
|        niel#2413        |             [Codepen](https://codepen.io/danielhsu/pen/bGvxKBY)              |
|       wiimax#4564       |             [Codepen](https://codepen.io/willismax/pen/yLKxEKG)              |
|      Mr.Sean#3825       |       [Codepen](https://codepen.io/sean_1215/pen/RwMYJzL?editors=1010)       |
|        吉利#3810        |             [Codepen](https://codepen.io/gillianyy/pen/eYMLmZe)              |
|        Nico#8739        |               [Codepen](https://codepen.io/Nicof2e/pen/BarOPmM)               |
|         JasonLu         |       [Codepen](https://codepen.io/wnptocip/pen/NWYLBLQ?editors=0010)        |
|   Midnightdinner#6220   |              [Codepen](https://codepen.io/bruno-yu/pen/vYRzWqv)              |
|       easton#3863       |         [Codepen](https://codepen.io/EastonIsCodingNow/pen/NWYLOWv)          |
|      Stanley#2505       |             [Codepen](https://codepen.io/bigbearada/pen/wvmEQZV)             |
|       Yihan#5560        |      [Codepen](https://codepen.io/h513hh513h/pen/LYdJXVx?editors=0010)       |
|        lingxuan         |     [Codepen](https://codepen.io/lingxuan0618/pen/GRxXPrV?editors=1010)      |
|         GL#2256         |               [Codepen](https://codepen.io/4genie/pen/YzaOdao)               |
|       yiling#4054       |        [Codepen](https://codepen.io/lin010/pen/dymqaNo?editors=1011)         |
|      NinaKuo#3332       |            [Codepen](https://codepen.io/ninakuo0814/pen/WNzgJRx)             |
|      Timothy#5863       |     [Codepen](https://codepen.io/timothy_hippo/pen/mdxGGMN?editors=1111)     |
|     Joechiboo#3960      |             [Codepen](https://codepen.io/joe-chiboo/pen/dymqxrB)             |
|       Kenge#3690        |               [Codepen](https://codepen.io/pgkusn/pen/oNqavbv)               |
|        Wins#8457        |             [Codepen](https://codepen.io/winszhuang/pen/JjLmPpj)             |
|       Irene#7932        | [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/YzaJKeW?editors=1010) |
|           aki           |               [codepen](https://codepen.io/aki168/pen/yLKRBxG)               |
|     Alex Liao#8538      |             [CodePen](https://codepen.io/alex0207s/pen/jOzeNgX)              |
|         TedWang         |      [CodePen](https://codepen.io/wangtaiyan/pen/oNqaNNB?editors=0010)       |
|        shin#5792        |        [CodePen](https://codepen.io/hah1030/pen/poLxvre?editors=0011)        |
|     Dylan_Lin#7320      |             [CodePen](https://codepen.io/lin-dylan/pen/JjLaMov)              |
|    許揚民 Evan#4546      |      [CodePen](https://codepen.io/gitevanhsu/pen/KKoGVem?editors=0011)       |
|        Otis#8455        |       [CodePen](https://codepen.io/humming74/pen/KKoGVQW?editors=1011)       |
|       Rocker#6235       |              [CodePen](https://codepen.io/RockerLi/pen/rNdqeqg)              |
|       Rikku#1756        |       [CodePen](https://codepen.io/rikkubook/pen/KKoGzbG?editors=1011)       |
|       Claire#2116       |      [CodePen](https://codepen.io/claire-chang-the-bashful/pen/RwMeRMy)      |
|        Shau#6400        |             [CodePen](https://codepen.io/shau-chen/pen/LYdgZqe)              |
|       灰塵貓#7994       |       [Codepen](https://codepen.io/rjk66268/pen/qBoJNep?editors=0010)        |
|     kyle890721#1016     |             [Codepen](https://codepen.io/KYLE890721/pen/OJvBbox)             |
|       Chelly#6129       |       [Codepen](https://codepen.io/chellyhsu/pen/ZExqLrG)       |
|      yoshidc#0455       |              [Codepen](https://codepen.io/yoshiyyc/pen/WNzapRQ)              |
|        城堡#2126        |             [Codepen](https://codepen.io/tthcastle/pen/MWVPpQo)              |
|        薯餅#3581        |           [Codepen](https://codepen.io/ColdingPoTaTo/pen/yLKRbBp)            |
|      Tuhacrt#0008       |              [Codepen](https://codepen.io/Tuhacrt/pen/yLKRbWZ)               |
|  charlottelee849#0366   |     [Codepen](https://codepen.io/charlotte-lee/pen/dymgRrd?editors=1010)     |
|        emma#3398        |        [Codepen](https://codepen.io/itsems/pen/gOeBxgJ?editors=0011)         |
|        雪莉#4827        |             [Codepen](https://codepen.io/utshang216/pen/rNdqzjw)             |
|         JC#8658         |             [Codepen](https://codepen.io/jcsamoyed/pen/rNdqzvp)              |
|       Kelvin#3296       |            [Codepen](https://codepen.io/kelvinchang/pen/qBoJVPr)             |
|        𝓛𝓊𝒸𝓎#8635        |              [Codepen](https://codepen.io/lucygirl/pen/ZExqryM)              |
|          雅帆           |             [Codepen](https://codepen.io/yafanchung/pen/YzaJeJW)             |
|        魚魚#0937        |              [Codepen](https://codepen.io/fish0522/pen/yLKRqOr)              |
|        彼得#1923        |              [Codepen](https://codepen.io/shiou-ho/pen/QWmZBoe)              |
|        Tsue#9284        |       [Codepen](https://codepen.io/AlbertoLL/pen/qBoJyzP?editors=1010)      |
|        座標33129#8748        |       [Codepen](https://codepen.io/ad80352/pen/WNzaYvg?editors=0010)      |
| Kimi#2092 | [Codepen](https://codepen.io/a3216lucy/pen/KKoxZaa)|
|       楓之聲#6945        |              [Codepen](https://codepen.io/sshane258/pen/gOeBVgE)    
|       Anson#3594        |              [Codepen](https://codepen.io/huanmingchang/pen/RwMqWmy?editors=1111)  |
|       Arista#5802        |              [Codepen](https://codepen.io/arista-hsieh/pen/vYRQLMw)  |
|      葉秋#2335     |              [Codepen](https://codepen.io/as880074/pen/yLKQeZb?editors=1111)  |
|      蘇蘇#0426     |              [Codepen](https://codepen.io/sabine1123/pen/gOeQrVR)  |
|      ZengZeng     | [Codepen](https://codepen.io/tyzyoko/pen/YzaJRNQ)  |
|鮪杰伯伯|[codepan](https://codepen.io/wei-nie/pen/MWVzpOb?editors=1010)|
|moitw|[codepen](https://codepen.io/tsuifei/pen/XWExzBK?editors=1011)|
|Mori#5582|[codepen](https://codepen.io/flower9312/pen/QWmJmGV)|
|hsiuhsiu #7412|[codepen](https://codepen.io/hsiuhsiu/pen/YzaRdye?editors=1010)|
|眼睛 #0314|[codepen](https://codepen.io/thrizzacode/pen/XWEyGqW?editors=0010)|
|KuoMin#4931|[codepen](https://codepen.io/KuoMin/pen/ZExmPgY?editors=1010)|
|JimmyChang#5558|[codepen](https://codepen.io/JimmyChangWenChi/pen/oNqQrbj)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/WNzYVVw)|
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/NWYePBW?editors=1010)|
|anby#7112|[codepen](https://codepen.io/andy-ch-bo-an/pen/OJvdvpW)|
|CofCat#9226|[codepen](https://codepen.io/cofcat456/pen/rNdPvqe)|
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/vYRbPQX)
|Rose#1669|[Codepen](https://codepen.io/Rose-Wu/pen/gOeEOvL)
|eching#9183|[Codepen](https://codepen.io/echin/pen/abYMJJO?editors=1010)
|紅豆豆#0518|[Codepen](https://codepen.io/zoseqlpc/pen/ZExZEKv?editors=0010)
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/QWmPBzg)
|hobby#6565|[Codepen](https://codepen.io/hobbyling/pen/jOzoPYg)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/LYdoEqN)|
|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/XWEwQwL)|
|JimHwang#3594|[Codepen](https://codepen.io/jimh1129/pen/NWYZPzw?editors=1111)|
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/ZExdGMY?editors=0011)|
|Overy#4545|[Codepen](https://codepen.io/overy-tsai/pen/vYRqJwK)
|Kyle Lin#0561|[Codepen](https://codepen.io/thenkyle/pen/oNqKGNN)
|Jordan|[Codepen](https://codepen.io/jordan-ttc-design/pen/OJZNyaN?editors=1011)
|SleepWalk#1635|[Codepen](https://codepen.io/arthurliinn/pen/XWYqzgp?editors=0010)
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/OJGorvq)|
