在 React 若需要使用外部套件，如 Bootstrap，以及會操作到 DOM，可以使用 [useRef](https://react.dev/reference/react/useRef) 這個 Hook 來引用需要操作的 DOM，Ref 在 React 是用以儲存值的物件，使用 useRef() 儲存即將要操作的 DOM，透過 useRef 儲存的值不會受到畫面渲染影響。

以 Bootstrap 的 Modal 為例，使用 JavaScript 來操作 Modal，作法如下：

const myModal = new bootstrap.Modal(document.getElementById('myModal'));

// 可以使用 myModal 加上 Bootstrap 提供的方法操作 Modal
myModal.show();

Bootstrap Modal 可以使用的方法可參考[文件](https://getbootstrap.com/docs/5.3/components/modal/#methods)。

### useRef
在 React 使用 useRef()，在要綁定的 DOM 設定 ref，綁定完成後印出，會是一個物件，值會儲存在 current 屬性中，後續需要操作 DOM 就可以使用 myModal.current 取得。

function Example() {
 const myModal = useRef(null);

 useEffect(() => {
  console.log('myModal', myModal);
  // myModal {current: div.modal.fade}
  
  // 綁定 Modal
  myModal.current = new bootstrap.Modal(modalRef.current);

  // 使用 myModal.current 加上 Bootstrap 提供的方法操作 Modal
  myModal.current.show();
 },[])



 return (
  // Modal
  <div class="modal fade" ref={myModal}>
  ...
  </div>
 )
}

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/JjewYyW?editors=0010)，使用 useRef() 綁定 Bootstrap Modal，並使用 Bootstrap Modal 的 show() 方法開啟 Modal。

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

<!-- 解答：

function Example() {
 
  const myModal = React.useRef(null);
  
  
  React.useEffect(() => {
    myModal.current = new bootstrap.Modal(myModal.current);
  },[])
  
  
  const openModal = () => {
  
    myModal.current.show();
  };
  return (
    <div>
      <button type="button" className="btn btn-primary" onClick={openModal}>
        開啟 Modal
      </button>

        <div className="modal fade" ref={myModal}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h1 className="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:-------------:|
| 1 | Evan | [CodePen](https://codepen.io/evanz1215/pen/jOXbMdW)|
| 2 | Nikki | [CodePen](https://codepen.io/Nikki-Kang/pen/MWZajxJ)|
| 3 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/poqjEZy) |
| 4 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/LYMpRgm?editors=0110) |
| 5 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/NWeGRQG) |
| 6 | yuchih | [Codepen](https://codepen.io/hijachu/pen/MWZabjv?editors=1010) |
| 7 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/wvRKorW?editors=0010) |
| 8 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/jOXbVjZ?editors=0110) |
| 9 | smalljie | [Codepen](https://codepen.io/smalljie/pen/rNoOWbq) |
| 10 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/oNJjBxX) |
| 11 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/KKbdayr) |
| 12 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/dywYvbR) |
| 13 | cataska | [Codepen](https://codepen.io/lovecankill/pen/LYMpxvx) |
| 14 | Wei_Rio| [Codepen](https://codepen.io/wei_wu/pen/dywYNWM) |
| 15 | orias_000| [Codepen](https://codepen.io/qoq77416416/pen/gOZamGQ?editors=1010) |
| 16 | ejchuang| [Codepen](https://codepen.io/EJChuang/pen/yLGYVXz) |
| 17 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/ExGVWLX) |
| 18 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/bGOVWRe?editors=0010) |
| 19 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/bGOVWrw)|
| 20 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/VwqvKBB)|
| 21 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/wvRKeym) |
| 22 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/bGOVrJG?editors=0011) |
| 23 | Kaya | [Codepen](https://codepen.io/laron9486/pen/rNoOGNz) |
| 24 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/VwqvrMK?editors=0010) |
| 25 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/VwqvQGo?editors=0011) |
| 26 | collinkao | [Codepen](https://codepen.io/collin0825/pen/GRPpxZN?editors=0010) |
| 27 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/zYyvjez?editors=0011) |
| 28 | shcopy | [Codepen](https://codepen.io/shcopy/pen/BavoOPE) |
| 29 | azami | [Codepen](https://codepen.io/azami/pen/QWzjQjE) |
| 30 | Aden | [Codepen](https://codepen.io/Osases/pen/YzdyRXy) |
| 31 | rainnping | [Codepen](https://codepen.io/rainnping/pen/WNLQYvX) |
| 32 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/ZEVbmoZ?editors=0010) |
| 33 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/GRPpPzz) |
| 34| curry | [Codepen](https://codepen.io/Ted19851223/pen/gOZaqVM?editors=1010) |
| 35 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/LYMGYLE?editors=0010) |
| 36 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/LYMGRJO?editors=1011) |
| 37 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/xxmZgWK?editors=0010) |
|38|HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/PoXZWLO?editors=0010)
|39|David0799|[Codepen](https://codepen.io/David0799/pen/qBLbRpB)
| 40 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/zYyrzXO) |
| 41 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/LYMGjpb) |
| 42 | Sui | [Codepen](https://codepen.io/suihsilan/pen/dywGzgJ?editors=0010) |
| 43 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/RwErxyy) |
| 44 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/xxmZZvP?editors=1010) |
| 45 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/YzdwjjW) |
| 46 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/PoXZvZL?editors=0010) |
| 47 | ryan_chou | [Codepen](https://codepen.io/csw8524/pen/wvRMLKo) |
| 48 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/zYyrVJX?editors=0010) |
| 49 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/BavoeGz) |
| 50 | Iris | [Codepen](https://codepen.io/iris831206/pen/YzdWPmE?editors=1010) |
| 51 | 小明 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/BavzKea) |
| 52 | Cami | [Codepen](https://codepen.io/fayevivi/pen/ExGyzoZ?editors=0011) |
| 53 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/MWZjrKG?editors=0010) |
| 54 | Kent | [Codepen](https://codepen.io/labkunz/pen/ZEVprQg?editors=0010) |
| 55 | Owen | [Codepen](https://codepen.io/owen-dong/pen/yLGgjWK?editors=0011) |
| 56 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/JjwWpVY?editors=0011) |
| 57 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/NWejyWR) |
| 58 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/VwqWwdb?editors=0010) |
| 59 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/XWwqqNw?editors=0010) |

| 0 | user | [Codepen]() |