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

昨天已經了解要如何使用 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 技巧將文章資料的標題和內文依序列出。

<!-- 解答：

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) |