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/hexschool/pen/bGvExWE)，運用 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 | collinkao | [CodePen](https://codepen.io/collin0825/pen/yLGLOXG?editors=0010)|
| 2 | 大頭 | [CodePen](https://codepen.io/d22495521/pen/rNoNeGE)|
| 3 | Evan | [CodePen](https://codepen.io/evanz1215/pen/gOZOrGG)|
| 4 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/jOXOqZQ) |
| 5 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/rNoNeqN)
| 6 | LiShang | [Codepen](https://codepen.io/LiShang/pen/RwEwaBZ) |
| 7 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/ZEVEWmg) |
| 8 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/LYMYNrR) |
| 9 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/rNoNeEV) |
| 10 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/YzdzWqe?editors=1010) |
| 11 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/dywyXMZ) |
| 12 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/YzdzWzE?editors=0010) |
| 13 | yuchih | [Codepen](https://codepen.io/hijachu/pen/Vwqwjjy?editors=0110) |
| 14 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/ZEVEOyW) |
| 15 | David0799 | [Codepen](https://codepen.io/David0799/pen/ExGxyxy) |
| 16 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/ExGxyom) |
| 17 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/rNoNLom) |
| 18 | Aden | [Codepen](https://codepen.io/Osases/pen/BavazeB) |
| 19 | Kent | [Codepen](https://codepen.io/labkunz/pen/oNJNzga?editors=1010) |
| 20 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/LYMYRLq) |
| 21 | shcopy | [Codepen](https://codepen.io/shcopy/pen/NWeWRab) |
| 22 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/OJrJbyg?editors=0110) |
| 23 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/xxmxqRJ?editors=0011) |
| 24 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/jOXOmZe) |
| 25 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/rNoNwWe?editors=1011) |
| 26 | smalljie | [Codepen](https://codepen.io/smalljie/pen/poqowbz) |
| 27 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/zYyYzqB?editors=1010) |
| 28 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/KKbKqLM?editors=1010) |
| 29 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/abPbyZG) |
| 30 | rainnping | [Codepen](https://codepen.io/rainnping/pen/mdadqdX) |
| 31| Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/poqopNe?editors=0010) |
| 32| Sui | [Codepen](https://codepen.io/suihsilan/pen/XWoWZGJ?editors=0010) |
| 33| Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/wvRvmBY?editors=1010) |
| 34 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/RwEwJyV) |
| 35 | 地球儀 | [codePen](https://codepen.io/dayday1222/pen/vYvYrzm?editors=0010) |
| 36 | 汪汪 | [Codepen](https://codepen.io/hunwooooof/pen/rNoBbrZ) |
| 37 | 妤ㄦ | [Codepen](https://codepen.io/bmtuepzo-the-sans/pen/XWoWxVL) |
| 38 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/PoXoydO) |
| 39 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/dywygJM?editors=0011) |
| 40 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/qBLBQWq?editors=0010) |
| 41 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/ExGxpMv) |
| 42 | azami | [Codepen](https://codepen.io/azami/pen/bGOGQpO) |
| 43 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/ExGxGyQ) |
| 44 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/wvRvVoa?editors=1010) |
| 45 | cataska | [Codepen](https://codepen.io/lovecankill/pen/KKbwPdQ) |
| 46 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/dywyxKL) |
| 47 | Kaya | [Codepen](https://codepen.io/laron9486/pen/wvRvJzM) |
| 48 | Iris | [Codepen](https://codepen.io/iris831206/pen/RwENNzP) |
| 49 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/jOXEPPa) |
|50|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/QWzwbyO?editors=1010)|
| 51 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/KKbKMVO) |
| 52 | Liam | [Codepen](https://codepen.io/liamkkobe/pen/MWZYjqO) |
| 53 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/GRPgNoZ) |
| 54 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/ZEVYXEo?editors=1010) |
| 55 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/NWePwqL?editors=1010) |
| 56 | SKey | [Codepen](https://codepen.io/Dale-Chien/pen/GRPgxqy) |
| 57 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/LYMEJbm) |
| 58 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/bGONxqN) |
| 59 | Lulu| [Codepen](https://codepen.io/Lin-Lulu/pen/VwqYgpw) |
| 60 | Emily4869| [Codepen](https://codepen.io/aptx4869Emily/pen/oNJXNZB) |
| 61 | curry | [Codepen](https://codepen.io/Ted19851223/pen/XWobKyd?editors=1010) |
| 62 | Jasmin| [Codepen](https://codepen.io/thejasmin/pen/poqJRmo) |
| 63 | Yiren| [Codepen](https://codepen.io/Yiren_Liou/pen/oNJXZwd) |
| 64 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/JjwdNKw) |
| 65 | Che1z | [Codepen](https://codepen.io/Shih-Min-Hung/pen/yLGNXXr) |
| 66 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/eYbNepo) |
| 67 | Tian | [Codepen](https://codepen.io/ccyy915/pen/PoXqQGZ) |
| 68 | Cami | [Codepen](https://codepen.io/fayevivi/pen/xxmwqQp) |
| 69 | hungya | [Codepen](https://codepen.io/hungya777/pen/NWeGyaR) |
| 70 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/ExGVdyQ) |
| 71 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzdyRgV?editors=0010) |
| 72 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/mdaPBBv) |
| 73 | Owen | [Codepen](https://codepen.io/owen-dong/pen/OJrNeRy?editors=0010) |
| 74 | Jujube | [Codepen](https://codepen.io/tendayling/pen/mdaEeeN) |
| 75 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/zYyBRZK?editors=0010) |
| 76 | EdHsu | [Codepen](https://codepen.io/Ed-Hsu/pen/dywXEGR) |
| 77 | DavidTsai | [Codepen](https://codepen.io/David-Tsai/pen/RwERmWx?editors=0011) |
| 78 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/OJrRgaM?editors=1011) |
| 79 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/rNoNewg) |
| 80 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/BavWgOG?editors=0010g) |
| 81 | Lydia | [Codepen](https://codepen.io/ling-chen-the-flexboxer/pen/GRzJmMQ?editors=1010) |

| 0 | user | [Codepen]() |