# 🏅Day25 - React 元件練習 (2) - 元件 props 資料傳遞

當我們想要將資料傳遞給子元件時，可以透過 props 來做傳遞。元件就像是 JavaScript 的 function，它可以接收任意的參數（即稱之為「props」），props 會回傳 React element，包含 children 以及自定義的參數。舉例來說：

function Child({ name }) {
  return <p>{name}</p> 
};
function Example() {
  return (
    <div>
      <Child name="John" />
    </div>
  );
}

在這個例子中，在 Child 定義了 name 這個參數，並給予 John 這個值。因此在 Child 元件就可以從 props 中取得 name 來使用。
備註：這邊的 `{ name }` 是物件解構的寫法，這裡也可以改成

function Child(props) {
  return <p>{props.name}</p> 
};

#### 文件參考
- [Your First Component](https://react.dev/learn/your-first-component#defining-a-component)
- [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
- [物件解構文件參考](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/WNVgZYd?editors=1010)，並使用 props 將資料傳到 Child 元件中，並顯示 `Hello, EveryOne!`

<!-- 解答：

// props 練習
function Child({target}) {
  return <p>Hello, {target}!</p> 
};
function Example() {
  return (
    <div>
      <Child target="EveryOne" />
    </div>
  );
}

-->
| Name | Codepen |
| ----------- | ---------------------------------------------------------------------------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/azZmjzG) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/bNegvZe?editors=1010) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/yyJgRyZ) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/qENRJdb) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/dPXNgpN?editors=1010) |
| Noooora | [CodePen](https://codepen.io/Nora-Ch/pen/pvbRxNY) |
| Eileen | [CodePen](https://codepen.io/Eileen-io/pen/bNegmBj) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/MYepNwm) |
| 星雪糖 | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/raLjqza?editors=0010) |
| Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/XJKpxVm) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/QwEdZmo?editors=0010) |
| 地瓜 | [CodePen](https://codepen.io/ChippyYU/pen/MYeJPGW) |
| 老屠 | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/GgqrYYG?editors=0010) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/OPXWaPq) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/RNRKqae) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/RNRKErw) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/xbOgmLe?editors=1010) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/PwzWXap) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/jEryRXx) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/dPXNEZW) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/yyJgzGy) |
| cks40660 | [Codepen](https://codepen.io/CKS40660/pen/ogLBRaw) |
| cks40660 | [Codepen](https://codepen.io/Fang-the-selector/pen/OPXWKvW?editors=1010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/raLjXKQ) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/VYjpZYK?editors=0010) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/LEZWxYj?editors=1010) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/emzvKpx?editors=1010) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/OPXpovR?editors=0010) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=myEWNXy) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/RNRKeZj?editors=1010) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/PwzmxOy?editors=0010) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/OPXjXOZ) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/wBWqzeV) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/ZYOJBWv) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/bNerYmm) |
| TWLeoC | [Codepan](https://codepen.io/TWLeoC/pen/LEZzQmq) |
| Wen | [Codepen](https://codepen.io/hsiao-kevin/pen/pvbpQWW?editors=1010) |
| tanuki | [Codepen](https://codepen.io/tanuki320/pen/gbMoyVK) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/XJKYwWx) |