React｜モーダル切り替え時にuseStateをスッキリさせる

見出し

こっちの方が良いよと教えてもらったので自分用メモとして残しておきます。

モーダルの切り替えのデモ

工夫点

useStateで複数のモーダルを扱う際にtrue・falseではなく『名前』で管理する。
メリット
・useStateがごちゃつかない

import React,{ useEffect,useCallback,useState }  from 'react';

+ const MODALS = {
+     DEFAULT: "default",
+     TEST1: "test1",
+     TEST2: "test2"
+  }

function ModalComponent(){
+    const[modalName, setModalName] = useState(null);
-  const [isModalOpne,setIsModalOpen] = useState(false)
-  const [isTESTModal1Open,setIsTESTModal1Open] = useState(false)
-  const [isTESTModal2Open,setIsTESTModal2Open] = useState(false)

   const handleClickClose = useCallback(() => {
    setModalName(null);
    document.removeEventListener('click', handleClickClose)
    },[])

    useEffect(()=>{
        return ()=>{
            document.removeEventListener('click', handleClickClose)
        }
    },[handleClickClose])

    const handleOpenClick = (event) => {
        setModalName(MODALS.DEFAULT);
        document.addEventListener('click',handleClickClose)
        event.stopPropagation()
	}
	
+     const DefaultModal = (
+         //デフォルトモーダル
+     )
+     const TestModal1 = (
+         //TESTモーダル１
+     )
+     const TestModal2 = (
+         //TESTモーダル２
+     )
- let modal;
- if(isTESTModal1Open){
-    modal=(
- 	//TESTモーダル1
- 	)
- }else if(isTESTModal2Open){
-     modal=(
- 	//TESTモーダル2
- 	)
- }else{
-     modal=(
- 	//デフォルトモーダル
- 	)
- }
   return (
     <div className="modalpage">
       <button className="modal-open-button" onClick={(event)=>{handleOpenClick(event)}}>
           モーダルを開く
       </button>
+        {modalName === MODALS.TEST1 && TestModal1}
+        {modalName === MODALS.TEST2 && TestModal2}
+        {modalName === MODALS.DEFAULT && DefaultModal}
- {modal}
     </div>
   );
 }
export default ModalComponent;

参考

基本的なモダールの作り方はこちらのサイトを参考にしました。
https://katatumuri.xyz/react/357/react-modal-function-component/#参考