質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Reactで特定の要素をクリックした際にその要素が出てくるモーダルウィンドを作りたい

qmoko
qmoko

総合スコア32

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0リアクション

0クリップ

248閲覧

投稿2022/09/07 23:23

実装したいこと

reactを使用してメニュー表を作成したい。

そのメニューを注文する際にクリックした特定の商品の名前と画像を表示させたいのですが、表示のさせ方がわかりません。
配列を作ってその中に名前、画像を入れて、クリックされたメニューの名前と画像を表示させることを考えましたが、作成方法がわかりませんでした。

また、より良い方法がある場合、そちらをご教授いただけると幸いです。

よろしくお願いいたします。

MenuAppe.js

import React, { useState } from 'react' import ModalAppe from './ModalAppe'; const MenuAppe = () => { const [showAppe, setShowAppe] = useState(false); const ShowModal = () => { setShowAppe(true); } return ( <div> <h1>appetizer</h1> <div> <h2>サラダ</h2> <ul> <li onClick={ShowModal}>Aのサラダ</li> <li onClick={ShowModal}>Bのサラダ</li> <li onClick={ShowModal}>Cのサラダ</li> <li onClick={ShowModal}>Dのサラダ</li> <li onClick={ShowModal}>Eのサラダ</li> <li onClick={ShowModal}>Fのサラダ</li> </ul> </div> <div> <h2>おつまみ</h2> <ul> <li onClick={ShowModal}>a</li> <li onClick={ShowModal}>b</li> <li onClick={ShowModal}>c</li> <li onClick={ShowModal}>d</li> <li onClick={ShowModal}>e</li> <li onClick={ShowModal}>f</li> <li onClick={ShowModal}>g</li> <li onClick={ShowModal}>h</li> </ul> </div> <ModalAppe showFlag={showAppe} setShowAppe={setShowAppe} /> </div> ) } export default MenuAppe

ModalAppe.js

import React from 'react' import '../App'; import Count from './Count'; function ModalAppe(props) { const closeModal = () => { props.setShowAppe(false); } return ( <div> {props.showFlag ? ( <div className='overlay'> <div className='modalContent'> <h3>名前</h3> <div> <div>画像</div> <div>個数</div> <Count /> </div> <div><button onClick={closeModal}>close</button> </div> </div> </div> ) : ( <></> )} </div> ); }; export default ModalAppe

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

qmoko

2022/09/10 00:59

今回はどのように作るのかということを自分の中で落とし込んで作ってみたかったので、su507様の回答をベストアンサーにさせていただきました。しかし、今後MUIを使って作ることもあると思います。その場合はnomari様の回答を参考にさせていただきます。 お忙しい中、ご回答いただきありがとうございました🙇

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。