【React】stateで管理するシンプルなモーダルを作成してみる

こんにちは！

最近 React でアプリ開発をする際にモーダルを作成したので、その方法をまとめておきたいと思います。

ページ遷移しなくても操作が行えるので、ストレスのない UI を作ることができますね

親（ページ）コンポーネント

import './App.css';
import { useState } from 'react';
import Modal from './Modal';

function Parent() {
// モーダルの開閉状態を親コンポーネントのstateで管理
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setIsModalOpen(true)}>モーダルを開く</button>
      <Modal isOpened={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
}

export default Parent;

子（モーダル）コンポーネント

const Modal = (props) => {
  if (!props.isOpened) {
    return null;
  }
  return (
    <div
      className="flex justify-center items-center overflow-auto fixed inset-0 m-auto bg-black1 bg-opacity-20 backdrop-blur-md z-20"
      onClick={props.onClose}
    >
      <div
        className="bg-white h-80 w-[32rem] rounded-2xl shadow-2xl"
        // コンポーネントの外側をクリックしたときにモーダルを閉じることができるように
        onClick={(e) => e.stopPropagation()}
      >
        <h2 className="mt-10 ml-12 text-xl">タスクの追加</h2>
        <form action="">
          <textarea className="block mx-auto my-7 border-[1px] border-black3 rounded-2xl w-4/5 h-40 resize-none"></textarea>
          <div className="text-right bg-black3 mt-5 w-full rounded-b-2xl py-5">
            <button
              className="mr-5 bg-black3 w-32 py-1 text-black2"
              onClick={props.onClose}
            >
              キャンセル
            </button>
            <button className="bg-blue1 w-40 mr-5 py-1 rounded-xl text-white">
              作成
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateTaskModal;

スタイリングに関しては tailwind CSS を使っています。className でスタイリングしていますので、普通の CSS を使う際は消すようにしてください。