---
# System prepended metadata

title: "\U0001F3C5Day26 - React 元件練習 (3) - 元件陣列資料 props 傳遞"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day26 - React 元件練習 (3) - 元件陣列資料 props 傳遞

昨天已經了解要如何使用 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/yen-kg/pen/XWvydGB?editors=1010)，並使用 .map 和 props 技巧將文章資料的標題和內文依序列出。


<!-- 解答： 
```
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 />);
```
-->

| Name        | Codepen                                                                      |
| ----------- | ---------------------------------------------------------------------------- |
| Mikka       | [codepen](https://codepen.io/Miikaa/pen/bNewjVp)                             |
| 7lun        | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/vEKxQNR?editors=1111)     |
| Eileen      | [codepen](https://codepen.io/Eileen-io/pen/jErBjeb)                          |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/qENrzLo?editors=1011)               |
| cks40660    | [CodePen](https://codepen.io/CKS40660/pen/wBWJLLB)                           |
| Melanie     | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/yyJMmyM)              |
| Marco       | [CodePen](https://codepen.io/MarcoChiu/pen/EayWqZR)                          |
| 社子畢卡索  | [CodePen](https://codepen.io/pen?template=MYepNQr)                           |
| 叮咚        | [CodePen](https://codepen.io/pinchieh-lin/pen/QwEpevd?editors=1010)          |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/emzvqMr)                           |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/raLmBMR?editors=0011) |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/GgqmREY)                              |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/VYjbLZL?editors=1011)              |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/gbMWpPm?editors=0010)           |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/vEKgePj)                           |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/LEZyGda)                            |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/raLmxqr)                              |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/RNRVrOW?editors=1011)            |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/raLmeVo)                            |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/xbOdVVv)                           |
| FangFang    | [Codepen](https://codepen.io/Fang-the-selector/pen/wBWdGGr?editors=1010)     |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/gbMWaGQ)                   |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/zxBwKjL?editors=0010)              |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/azZWBYz?editors=0010) |
| wind        | [Codepen](https://codepen.io/wind7y/pen/XJKRpVN)                             |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/YPWVrzX?editors=0010)              |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/xbOqoPL?editors=1010)           |
| Leonard     | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/raLmoGp?editors=1010)     |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/PwzjoPR?editors=1010)              |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/WbxOxZm)               |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYevKQJ?editors=1010) |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/pvbrbpB)              |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/ZYOJpxe)                            |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/emzEBzM)                           |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/LEZjBvW?editors=1011)               |
| TWLeoC      | [Codepan](https://codepen.io/TWLeoC/pen/LEZzQra?editors=0010)                |
| Wen         | [Codepen](https://codepen.io/hsiao-kevin/pen/XJKVyVB?editors=1010)           |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/myEpYJL?editors=1010)             |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/RNRBJbw)                          | 