モーダルの開閉状態が正しく反映されない問題と解決方法

はじめに

モーダルの開閉状態に応じてCSSを切り替える処理を実装した際、期待通りの動作をしない問題が発生しました。本記事では、その事象の詳細と原因、そして解決方法について解説します。

前提

以下の条件下で発生した問題について取り扱います：

• Modal コンポーネントと Contents コンポーネントがそれぞれカスタムフックを用いて、モーダルの開閉状態を管理している
• Contents コンポーネントでは、isOpenModal の値によってモーダルの表示・非表示を制御
• Modal コンポーネントでは、isOpenModal の値によって適用するCSSクラスを動的に切り替える

実際のコードは以下の通りです。

export const Contents = () => {
    const { isOpenModal, onClickOpenModal } = useContents()

    return (
        <button onClick={onClickOpenModal}>
        {isOpenModal && <Modal />}
    )
}

export const Modal = () => {
    const { isOpenModal } = useContents()

    return (
        <div className={`${isOpenModal ? 'text-black' : 'text-white'}`}>
            <button>キャンセル</button>
            <button>送信</button>
        </div>
    )
}

問題

onClickOpenModal関数が実行されることで、isOpenModalがfalseからtrueに変化することを期待しています。しかし、ModalコンポーネントではisOpenModalが常にfalseのままとなり、CSSが正しく切り替わりませんでした。

原因

Contents と Modal がそれぞれ別のインスタンスのカスタムフック (useContents) を参照していたため、状態が同期されていませんでした。この結果、Contents での状態更新が Modal に正しく反映されていなかったのです。

解決方法

Contentsコンポーネントで参照しているisOpenModalをModalコンポーネントに対して引数として渡してあげると、Contents内のCSSの切り替え処理が期待通り動作します。