前提
ショッピングカートの機能を実装したい
実現したいこと・発生している問題
ショッピングカートの機能を選んだ商品を配列に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) 'など試してみましたが、定義されていないと出てしまいました。
初歩的な質問ですが教えていただけますと、幸いです。
よろしくお願いいたします🙇
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/23 07:32