【ITニュース解説】react-bootstrap Modal never displays
2025年09月03日に「Dev.to」が公開したITニュース「react-bootstrap Modal never displays」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
Reactでページを書き換える際、`react-bootstrap`を使ったモーダルがクリックしても表示されず、開発者ツールにもHTMLが現れない問題に直面している。`Modal`コンポーネントの`show`プロパティを制御する状態管理が実装されておらず、モーダルが表示されないことが原因だと推測される。
ITニュース解説
このニュース記事は、React BootstrapのModalコンポーネントが期待通りに表示されないという問題について記述している。システムエンジニアを目指す初心者向けに、この問題を理解し、解決に役立つように解説する。
まず、問題の概要を確認する。記事投稿者は、既存のフィードバックページをReactフレームワークで書き換える作業を行っている。その際、React BootstrapのModalコンポーネントを使用してモーダルウィンドウを実装しようとしているが、フィードバックリンクをクリックしてもモーダルが表示されない。さらに、ブラウザの開発者ツールでHTMLを調べても、モーダルに関連するHTML自体が存在しないという状況だ。
問題の原因を特定するために、コードを詳しく見ていく。FeedbackContainerコンポーネントは、フィードバックリンクとモーダルの外枠を定義している。リンクにはdata-toggle="modal"とdata-target="#feedback-modal"という属性が付与されており、これは従来のBootstrapのモーダルを起動するための記述だ。しかし、React Bootstrapを使用する場合、この方法は推奨されない。React Bootstrapは、JavaScriptを通じてモーダルの表示/非表示を制御することを前提としているからだ。
FeedbackModalコンポーネントは、実際にモーダルを構成する部分だ。ここでは、useStateフックを使ってshowという状態変数を定義し、モーダルの表示/非表示を制御している。showがtrueの場合にモーダルが表示され、falseの場合は非表示になる。onHideプロパティにはhandleClose関数が設定されており、モーダルを閉じるための処理が記述されている。
ここで重要なのは、FeedbackContainerコンポーネント内のリンクのonClickイベントハンドラだ。event.preventDefault()とreturn false;が記述されているため、リンクのデフォルトの動作（ページ遷移）は阻止されている。しかし、モーダルのshow状態をtrueにする処理が記述されていないため、リンクをクリックしてもモーダルは表示されない。
さらに、FeedbackModalコンポーネントがFeedbackContainerコンポーネント内でレンダリングされているにもかかわらず、初期状態がshow={false}であるため、ページロード時にモーダルが表示されることはない。
問題の解決策としては、以下の点が考えられる。
-
React BootstrapのModalコンポーネントの制御方法に合わせる:
FeedbackContainerコンポーネントで、リンクのonClickイベントハンドラ内でFeedbackModalコンポーネントのshow状態をtrueに変更する処理を追加する。具体的には、FeedbackContainer内でuseStateを使ってモーダルの表示状態を管理し、リンクのクリック時にその状態を更新する。そして、その状態をFeedbackModalコンポーネントにpropsとして渡す必要がある。 -
従来のBootstrapのモーダルの起動方法との混同を避ける:
data-toggleやdata-targetといった属性は、React Bootstrapでは不要になるため、削除する。 -
FeedbackModalContentDelivererコンポーネントの非同期処理:useGetDataフックを使ってデータを取得しているが、データの取得が完了する前にFeedbackModalContentDelivererコンポーネントがレンダリングされる可能性がある。ローディング状態を適切に管理し、データが取得されるまでプレースホルダーを表示するなど、ユーザーエクスペリエンスを向上させる必要がある。 -
HTML文字列の直接挿入:
htmlDecode関数を使ってHTML文字列を直接挿入しているが、これはセキュリティ上のリスクがある。XSS（クロスサイトスクリプティング）攻撃を防ぐために、HTML文字列を適切にエスケープするか、Reactのコンポーネントとして安全にレンダリングする方法を検討する。
これらの解決策を実装することで、React BootstrapのModalコンポーネントが正しく表示されるようになるはずだ。React Bootstrapのドキュメントをよく読み、コンポーネントのpropsやイベントハンドラの使い方を理解することが重要だ。また、Reactの状態管理の仕組みを理解することも、同様の問題を解決するために不可欠となる。