🌗

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

2 min read

見出し

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

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

工夫点

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モーダル1
+     )
+     const TestModal2 = (
+         //TESTモーダル2
+     )
- 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/#参考

Discussion

ログインするとコメントできます