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

実装したいこと

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

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

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

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

MenuAppe.js
1import React, { useState } from 'react'
2import ModalAppe from './ModalAppe';
3
4const MenuAppe = () => {
5  const [showAppe, setShowAppe] = useState(false);
6
7  const ShowModal = () => {
8    setShowAppe(true);
9  }
10
11  return (
12    <div>
13      <h1>appetizer</h1>
14      <div>
15        <h2>サラダ</h2>
16        <ul>
17          <li onClick={ShowModal}>Aのサラダ</li>
18          <li onClick={ShowModal}>Bのサラダ</li>
19          <li onClick={ShowModal}>Cのサラダ</li>
20          <li onClick={ShowModal}>Dのサラダ</li>
21          <li onClick={ShowModal}>Eのサラダ</li>
22          <li onClick={ShowModal}>Fのサラダ</li>
23        </ul>
24      </div>
25      <div>
26        <h2>おつまみ</h2>
27        <ul>
28          <li onClick={ShowModal}>a</li>
29          <li onClick={ShowModal}>b</li>
30          <li onClick={ShowModal}>c</li>
31          <li onClick={ShowModal}>d</li>
32          <li onClick={ShowModal}>e</li>
33          <li onClick={ShowModal}>f</li>
34          <li onClick={ShowModal}>g</li>
35          <li onClick={ShowModal}>h</li>
36        </ul>
37      </div>
38      <ModalAppe showFlag={showAppe} setShowAppe={setShowAppe} />
39    </div>
40  )
41}
42
43export default MenuAppe

ModalAppe.js
1import React from 'react'
2import '../App';
3import Count from './Count';
4
5function ModalAppe(props) {
6  const closeModal = () => {
7    props.setShowAppe(false);
8  }
9
10  return (
11    <div>
12    {props.showFlag ? (
13      <div className='overlay'>
14          <div className='modalContent'>
15            <h3>名前</h3>
16            <div>
17              <div>画像</div>
18              <div>個数</div>
19              <Count />
20            </div>
21            <div><button onClick={closeModal}>close</button>
22          </div>
23        </div>
24      </div>
25    ) : (
26      <></>
27    )}
28    </div>
29  );
30};
31
32export default ModalAppe

qmoko

2022/09/10 00:59

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

行動規範の内容に同意します

回答2件

ベストアンサー

モーダルの表示、非表示を切り替えるフラグの変数が showAppe で、モーダルのコンポーネントが ModalAppe である場合にshowAppe をどのように使えばよいかというと、質問のコードにあるような

jsx
1<ModalAppe showFlag={showAppe} setShowAppe={setShowAppe} dialogMenuData={dialogMenuData} />

というようにモーダルのpropとして渡すという方法も無くはないですが、別の方法としてモーダルを配置したい（モーダル側から見ると親になる）コンポーネント、今回でいうと MenuAppe のほうで

jsx
1{showAppe && <ModalAppe setShowAppe={setShowAppe} dialogMenuData={dialogMenuData} />}

とするのがよくやる定跡です。フラグになる showAppe は true , false のbooleanでもよいですし、何らかの文字列 status がfalsy(つまり空文字列、null、undefined のどれか)だったら警告のモーダルを出すというのであれば、

jsx
1{!status && <WarningModal message="status is empty !" />}

などとします。

この改修点をふまえてざっくりサンプルを作ってみました。creact-react-app で作ったアプリに以下をコピペで試せると思います。

src/index.js

javascript
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4
5const root = ReactDOM.createRoot(document.getElementById('root'));
6
7root.render(
8  <App />
9);

src/App.js

jsx
1import MenuAppe from './MenuAppe';
2
3const data = [
4  {
5    name: 'サラダ',
6    items: [
7      { id: 1, name: 'サラダA', count: 1, imgSrc: 'https://dummyimage.com/200x150/0004ff/ffffff.png&text=A' },
8      { id: 2, name: 'サラダB', count: 2, imgSrc: 'https://dummyimage.com/200x150/05a12f/ffffff.png&text=B' },
9      { id: 3, name: 'サラダC', count: 3, imgSrc: 'https://dummyimage.com/200x150/ff47dd/ffffff.png&text=C' },
10    ]
11  },
12  {
13    name: 'おつまみ',
14    items: [
15      { id: 4, name: 'おつまみa', count: 4, imgSrc: 'https://dummyimage.com/200x150/ff3b3b/ffffff.png&text=a'},
16      { id: 5, name: 'おつまみb', count: 5, imgSrc: 'https://dummyimage.com/200x150/00bcbf/ffffff.png&text=b'},
17    ],
18  }
19];
20
21function App() {
22  return (
23    <MenuAppe appetizers={data} />
24  );
25}
26
27export default App;

src/MenuAppe.js

jsx
1import React, { useState } from 'react'
2import AppetizerItems from './AppetizerItems';
3import ModalAppe from './ModalAppe';
4
5const MenuAppe = ({ appetizers }) => {
6  const [selectedItem, setSelectedItem] = useState(null);
7
8  const handleSelectItem = (item) => {
9    setSelectedItem(item);
10  }
11
12  return (
13    <div>
14      <h1>appetizer</h1>
15      {appetizers.map(appetizer =>
16          <AppetizerItems
17            key={appetizer.name}
18            {...appetizer}
19            onClick={handleSelectItem}
20          />
21       )}
22      {selectedItem &&
23        <ModalAppe
24          item={selectedItem}
25          onClose={() => handleSelectItem(null)}
26        />
27      }
28    </div>
29  )
30}
31
32export default MenuAppe;
33

src/AppetizerItems.js

jsx
1import React from 'react'
2
3const AppetizerItems = ({ name, items, onClick }) => {
4  const handleClick = (item) => {
5    onClick(item);
6  }
7
8  return (
9    <div>
10      <h2>{name}</h2>
11      <ul>
12        {items.map(item => (
13          <li key={item.id} onClick={() => handleClick(item)}>
14            {item.name}
15          </li>
16        ))}
17      </ul>
18    </div>
19  );
20}
21
22export default AppetizerItems;

src/ModalAppe.js

jsx
1import React from 'react'
2import Count from './Count';
3
4const ModalAppe = ({ item: { name, imgSrc, count}, onClose }) => {
5  const handleClose = () => {
6    onClose();
7  }
8
9  return (
10    <div className='overlay'>
11      <div className='modalContent'>
12        <h3>{name}</h3>
13        <div>
14          <div><img src={imgSrc} alt="" /></div>
15          <div>個数</div>
16          <Count value={count} />
17        </div>
18        <div>
19          <button onClick={handleClose}>close</button>
20        </div>
21      </div>
22    </div>
23  );
24}
25
26export default ModalAppe;

src/Count.js

jsx
1import React from 'react'
2
3function Count({ value }) {
4  return <span>{value}</span>;
5}
6
7export default Count;

補足

フラグ変数 flag が truthy のときだけ何らかのコンポーネント Component を表示したいとき上記の回答に書いた

jsx
1{flag && <Component />}

とするのはよくやる手ですが、Component 側に表示、非表示のフラグをpropで渡し、表示、非表示の制御をそのコンポーネント側でやりたいという場合もあるでしょう。nomariさんの回答で提案されている Material UI の Dialog はそのようなフラグをprop open で受け取ります。

投稿2022/09/08 06:57

編集2022/09/08 07:24

退会済みユーザー

総合スコア0

もしMUIを使用することに抵抗がなければ、そちらのDialogコンポーネントで簡単に実装できると思います。
(MUIをインストールする必要がありますが…)

jsx
1*** MenuAppe.jsx ***
2
3import React, { useState } from 'react'
4import ModalAppe from './ModalAppe';
5
6const MenuAppe = () => {
7  const [showAppe, setShowAppe] = useState(false);
8  const [dialogMenuData, setDialogMenuData] = useState(null);
9
10  const ShowModal = ({menuName, picture}) => {
11    setShowAppe(true);
12    setDialogMenuData({menuName, picture})
13  }
14  
15  // メニューデータを作成する
16  const menuArray = [
17    {categoryId: 1, categoryName: サラダ, menu: {
18        { menuId: 1, menuName: Aのサラダ, picture: (写真A)},
19        { menuId: 2, menuName: Bのサラダ, picture: (写真B)},
20        { menuId: 3, menuName: Cのサラダ, picture: (写真C)},
21        { menuId: 4, menuName: Dのサラダ, picture: (写真D)},
22        { menuId: 5, menuName: Eのサラダ, picture: (写真E)},
23        { menuId: 6, menuName: Fのサラダ, picture: (写真F)}
24    }},
25    {categoryId: 2, categoryName: おつまみ, menu: {
26        { menuId: 1, menuName: aのおつまみ, picture: (写真a)},
27        { menuId: 2, menuName: bのおつまみ, picture: (写真b)},
28        { menuId: 3, menuName: cのおつまみ, picture: (写真c)},
29        { menuId: 4, menuName: dのおつまみ, picture: (写真d)},
30        { menuId: 5, menuName: eのおつまみ, picture: (写真e)},
31        { menuId: 6, menuName: fのおつまみ, picture: (写真f)},
32        { menuId: 7, menuName: gのおつまみ, picture: (写真g)},
33        { menuId: 8, menuName: hのおつまみ, picture: (写真h)}
34    }}
35  ]
36
37  return (
38    <div>
39      <h1>appetizer</h1>
40      <div>
41        {menuArray.map((data) => {
42            const {categoryId, categoryName, menu} = data;
43        
44            return (
45                <h2 key={categoryId}>
46                    {categoryName}
47                </h2>
48                <ul>
49                {nemu.map((menudata) => {
50                    const {menuId, menuName, picture} = menudata;
51                    
52                    return (
53                        <li key={menuId} onClick={() => {ShowModal(menuName, picture)}}>
54                            {menuName}
55                        </li>
56                    );
57                }}
58                </ul>
59            );
60        }}
61      </div>
62      <ModalAppe showFlag={showAppe} setShowAppe={setShowAppe} dialogMenuData={dialogMenuData} />
63    </div>
64  )
65}
66
67export default MenuAppe

jsx
1*** ModalAppe.jsx ***
2
3import React from 'react'
4import '../App';
5import Count from './Count';
6import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
7
8function ModalAppe(props) {
9
10  const {showAppe, setShowAppe, dialogMenuData} = props;
11  const {menuName, picture} = dialogMenuData;
12
13  const closeModal = () => {
14    setShowAppe(false);
15  }
16
17  return (
18    <Dialog open={showAppe}>
19      <div className='overlay'>
20          <div className='modalContent'>
21            <DialogTitle>{menuName}</DialogTitle>
22            <DialogContent>
23              <div>{picture}</div>
24              <div>個数</div>
25              <Count />
26            </DialogContent>
27            <DialogActions>
28                <button onClick={closeModal}>close</button>
29            </DialogActions>
30          </div>
31      </div>
32    </Dialog>
33  );
34};
35
36export default ModalAppe