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

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

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

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

Q&A

解決済

1回答

1046閲覧

ショッピングカートの機能を実装したいがカートに追加ボタンを押された商品を特定できない

mo1

総合スコア2

React.js

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

0グッド

0クリップ

投稿2022/11/23 01:29

前提

ショッピングカートの機能を実装したい

実現したいこと・発生している問題

ショッピングカートの機能を選んだ商品を配列にpushする形で作ろうと考えています。
その中で、追加ボタンを押すと商品が配列にpushされるようにしたいが、
ボタンを押されたのがどの商品が特定することができなかった。

該当のソースコード

App.js

1import './App.css'; 2import Header from './components/Header.js'; 3import Main from './components/Main.js'; 4 5function App() { 6 7 const data = [ 8 { 9 items: [ 10 { id: 1, name: '抹茶', price: '¥100', imgSrc: 'https://dummyimage.com/200x150/0004ff/ffffff.png&text=A' }, 11 { id: 2, name: 'アイスコーヒー', price: '¥200', imgSrc: 'https://dummyimage.com/200x150/05a12f/ffffff.png&text=B' }, 12 { id: 3, name: 'ホットコーヒー', price: '¥300', imgSrc: 'https://dummyimage.com/200x150/ff47dd/ffffff.png&text=C' }, 13 { id: 4, name: '抹茶', price: '¥100', imgSrc: 'https://dummyimage.com/200x150/0004ff/ffffff.png&text=A' }, 14 { id: 5, name: 'アイスコーヒー', price: '¥200', imgSrc: 'https://dummyimage.com/200x150/05a12f/ffffff.png&text=B' }, 15 { id: 6, name: 'ホットコーヒー', price: '¥300', imgSrc: 'https://dummyimage.com/200x150/ff47dd/ffffff.png&text=C' }, 16 ] 17 } 18 ]; 19 20 return ( 21 <div className="App"> 22 <Header /> 23 <Main menuData={data}/> 24 </div> 25 ); 26} 27 28export default App; 29

Main.js

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

MenuList.js

1import React from 'react' 2 3function MenuList({ items, onClick }) { 4 5 const handleClick = (item) => { 6 onClick(item); 7 } 8 9 const inCart = [] 10 11 const addToCart = () => { 12 inCart.push(items.name) 13 console.log(inCart) 14 } 15 16 return ( 17 <div> 18 <ul> 19 {items.map(item => ( 20 <li key={item.id} onClick={() => handleClick(item)}> 21 <div><img src={item.imgSrc} alt="" /></div> 22 <h3>{item.name}</h3> 23 <div> 24 <h2>{item.price}</h2> 25 <button key={item.id} onClick={addToCart}>🛒追加</button> 26 </div> 27 </li> 28 ))} 29 </ul> 30 </div> 31 ); 32} 33 34export default MenuList

Modal.js

1import React from 'react' 2 3function Modal({ item: { name, imgSrc }, onClose }) { 4 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> 16 <div> 17 <button onClick={handleClose}>close</button> 18 </div> 19 </div> 20 </div> 21 ) 22} 23 24export default Modal

試したこと

MenuList.jsの12行目を' inCart.push(item.name) 'など試してみましたが、定義されていないと出てしまいました。

初歩的な質問ですが教えていただけますと、幸いです。
よろしくお願いいたします🙇

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

追加ボタンを押すと商品が配列にpushされるようにしたいが、ボタンを押されたのがどの商品が特定することができなかった。

下記のようにしてみてはいかがでしょうか。
MenuList.js

js

1import React, { useState } from "react"; 2 3function MenuList({ items, onClick }) { 4 const handleClick = (item) => { 5 onClick(item); 6 }; 7 8 const [inCart, setInCart] = useState([]); 9 10 const addToCart = (item) => { 11 const newItemsInCart = [item.name, ...inCart]; 12 setInCart(newItemsInCart); 13 console.log(newItemsInCart); 14 }; 15 16 return ( 17 <div> 18 <ul> 19 {items.map((item) => ( 20 <li key={item.id} onClick={() => handleClick(item)}> 21 <div> 22 <img src={item.imgSrc} alt="" /> 23 </div> 24 <h3>{item.name}</h3> 25 <div> 26 <h2>{item.price}</h2> 27 <button key={item.id} onClick={() => addToCart(item)}> 28 🛒追加 29 </button> 30 </div> 31 </li> 32 ))} 33 </ul> 34 </div> 35 ); 36} 37 38export default MenuList; 39

投稿2022/11/23 04:47

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mo1

2022/11/23 07:32

qnoir様 ご回答いただきありがとうございます。 できました! ```addToCart```に引数をとると良かったんですね! 勉強になりました。ありがとうございました🙇🙇🙇
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問