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 的開關效果。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

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

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/dPbVXEQ?editors=1011) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/QwLVMMO?editors=1111) |
| 3 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/zxOJjRe?editors=1010) |
| 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/MYgqNRP) |
| 5 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/JoPmPoo) |
| 6 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/qEWJWEd?editors=0010)|
| 7 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/ZYzqzGP?editors=0011) |
| 8 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/EaYdYQV) |
| 9 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYzqzvg) |
| 10 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/ByBqBwx) |
|11|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/vEBVBje?editors=0011)|
| 12 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ByBqBYV?editors=0010)|
| 13 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/zxOmOZY) |
| 14 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/MYgPgZW?editors=1011) |
| 15 | Toung | [Codepen](https://codepen.io/Toung/pen/yyBRBwB)
| 16 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/LEPgYEz?editors=0011) |
| 17 | Clove | [Codepen](https://codesandbox.io/p/sandbox/p89y86) |
| 18 | Amanda | [Codepen](https://codepen.io/cym199922/pen/MYgPewa) |
| 19 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/vEBVgpV?editors=1010) |
| 20 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/ogvadWV) |
| 21 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/vEBVjjE?editors=1010) |
| 22 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/xbKyaPQ) |
| 23 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/GgKYwaa?editors=1010) |
| 24 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/ZYzmGZg) |
| 25 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/ZYzVzrm) |
| 26 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/zxOVOMz?editors=1010) |
| 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/ogNNZrK?editors=0011) |
| 28 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/emYZwGM?editors=1010) |
| 29 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/mydrYew?editors=1010) |
| 30 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/OPJmqLm?editors=1010) |
| 31 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/raNYjQr?editors=0010) |
| 32 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/mydGmmg?editors=1010) |
| 33 | jinliu214| [Codepen](https://codepen.io/jinliu214/pen/jEEQwrK?editors=0010) |
| 34 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/yyNwGxJ?editors=1011) |
| 35 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/MYKjQzV) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |