У меня есть 2 отдельных массива
export const crepes = [
{ "id": "1", image: baconCrepe, title: "Bacon",
description: 'Mozzarella, grilled chicken, fried bacon, fresh tomatoes, BBQ sauce, spinach, arugula', price: '5$'},
{ "id": "2", image: fourCheeseCrepe, title: "4 cheese",
description: 'Mozzarella, gorgonzola, camembert, parmesan, white sauce, arugula', price: '5$'},
{ "id": "3", image: nutellaCrepe, title: "Nutella",
description: 'Nutella, Oreo bisquits, strawberries', price: '5$'},
{ "id": "4", image: salmonCrepe, title: "Salmon",
description: 'Philadelphia cheese, fresh salmon, avocado, fresh cucumber', price: '5$'},
{ "id": "5", image: vegeSalad, title: "Vege salad",
description: 'Beetroot marinated in honey, Halloumi cheese, pomegranate seeds, lamb`s lettuce, cashew nuts', price: '5$'},
{ "id": "6", image: coleslowSalad, title: "Coleslow salad",
description: 'Cabbage, lime juice, mayonnaise, lemongrass, coriander', price: '5$'}
]
export const burgers = [
{ "id": "1", image: cranberryBurger, title: "Cranberry",
description: '100% Beef, Camembert, cranberry sauce, red onion, arugula, lamb`s lettuce',
price: '5$'},
{ "id": "2", image: italianTaste, title: "Italian taste",
description: '100% Beef, mascarpone, black olives, dried tomatoes, red onion, arugula, iceberg lettuce', price: '4$'},
{ "id": "3", image: mushroomBurger, title: "Mushroom",
description: '100% beef, mushrooms in sour cream, red onion, arugula, cheddar, iceberg lettuce', price: '4$'},
{ "id": "4", image: seasonalBurger, title: "Seasonal",
description: '100% beef, tomato sauce, asparagus, red onion, iceberg lettuce, lamb`s lettuce', price: '5$'},
{ "id": "5", image: vegeBurger, title: "Vege",
description: 'Halloumi cheese, red onion, beetroot marinated in honey, homemade sauce, sunflower sprouts, lamb`s lettuce', price: '5$'},
]
Они выводятся в компоненте Menu
<TabPanel>
<div className="burgers">
<ul>
{burgers.map(burger => (
<li key={burger.id}>
<h4>{burger.title}</h4>
<span>{burger.price}</span>
<img src={burger.image} alt={burger.title} />
<p>{burger.description}</p>
<button type="submit" onClick={() => addToCart()}>Add to cart</button>
</li>
))}
</ul>
</div>
</TabPanel>
<TabPanel>
<div className="crepes">
<ul>
{crepes.map(crepe => (
<li key={crepe.id}>
<h4>{crepe.title}</h4>
<span>{crepe.price}</span>
<img src={crepe.image} alt={crepe.title} />
<p>{crepe.description}</p>
<button type="submit" onClick={() => addToCart()}>Add to cart</button>
</li>
))}
</ul>
</div>
</TabPanel>
Я хочу добавить функцию добавления элемента в корзину путем нажатия кнопки Add to cart
Что-то вроде этого?
const [cart, setCart] = useState([]);
const addToCart = () => setCart((currentCart) => [...currentCart]);
<button type="submit" onClick={() => addToCart()}>Add to cart</button>
Можно ли как-то соединить эти два массива, чтобы добавлять и бургеры и блины в корзину одной функцией? Как этого достичь? Все примеры, которые я просматривала, были простыми и элементы состояли в одном массиве( ими было легко управлять). Я усложнила себе задачу и запуталась. Помогите, пожалуйста