# 🏅Day28 - React 元件練習 (5) - 元件 props 事件處理

props 不僅可以傳遞資料，也可以傳遞函式使用，讓元件共用同一個函式。如以下範例，我們可以將一個 handleClick 傳到 Child 元件內，讓元件點擊時可以根據不同的名稱來改變 Example 的 name 資料值。 因為是動態資料值，所以這邊會使用 `{}` 來將函式傳入。

function Example() {
  const [name, setName] = React.useState("John");
  const handleClick = name => {
    setName(name);
  };
  return (
    <div>
      <p>現在的 Name 是 <b>{name}</b></p>
      <Child name="John" handleClick={handleClick} />
      <Child name="Mary" handleClick={handleClick} />
    </div>
  );
}

在 Child 元件這邊，也同樣是 props 進來就可以使用囉

function Child({ name, handleClick }) {
  return <button onClick={() => handleClick(name)}>{name}</button> 
};

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/jOgQmLV?editors=1010)，運用 props 資料和事件完成 Modal 的開關效果。

<!-- 解答：

function Modal({ open, close }) {
  return <div className="modal" style={{ display: open? 'block' : 'none'}}> 
    <div className="modal-content">Modal 
      <button className="close" onClick={close}> x </button> 
    </div>
  </div>; 
};
function Example() {
  const [open, setOpen] = React.useState(false);
  const toggleOpen = () => {
    setOpen(!open);
  };
  return (
    <div>
      <button onClick={toggleOpen}> Open Modal </button>
      <Modal open={open} close={toggleOpen} />
    </div>
  );
}

-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/raLWZLQ) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/yyJMQze?editors=1010) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/MYeogpB) |
|cks40660 | [codepen](https://codepen.io/CKS40660/pen/NPrgKgw)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/pvbwzwK?editors=1111)|
| Marco | [CodePen](https://codepen.io/MarcoChiu/pen/OPXgLdz)|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/emzROxa?editors=0010)|
| 社子畢卡索 | [CodePen](https://codepen.io/pen?template=gbMROav)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/LEZLPKZ)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/OPXgJjo?editors=1010)|
| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/EayXxbg?editors=1010)|
| 7Red | [Codepen](https://codepen.io/cch2655/pen/zxBzYjK) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/dPXRPWQ) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/ZYOyYBK?editors=0010) |
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/ogLwXwg)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/wBWeaZm)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/KwMqVWg?editors=0010)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/YPWQyve?editors=0010 )|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/MYeogQz?editors=1010)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/VYjWjgX)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/ZYOyOwW) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/OPXWxKq) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/MYeobzZ?editors=0011) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/vEKZxBz?editors=0010) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/QwEgdNz) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/yyJXbev?editors=1010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/yyJXXVW) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/EayXGZv?editors=0010) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/VYjWgPZ) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYevKdo?editors=1010) |
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/ByzdzVP)|
|舜仁|[Codepen](https://codepen.io/shunjen/pen/raLzWOd)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/vEKJyZY)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/LEZzQvo?editors=0010)|
|JiaMori|[Codepan](https://codepen.io/jiamori/pen/VYjrpmW)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/dPXJwpM?editors=1010)|