Только - только начал изучать React и столкнулся с проблемой: в приложении (что-то то вроде одностраничного интернет-магазина) при выборе товаров, они складываются в массив объектов "cartItems", который мне из "App" надо передать в "Modal", чтобы отобразить список товаров перед оформлением заказа, но никак не могу понять как это сделать, буду благодарен любой помощи. Прошу прощения за костыли и плохо читаемый код. Код "App.jsx":
import { useState, useEffect } from "react";
import "./App.css";
import Button from "./Components/Button/Button";
import Card from "./Components/Card/Card";
import Cart from "./Components/Cart/Cart";
import Modal from "./Components/Modal/Modal";
<script src="https://telegram.org/js/telegram-web-app.js"></script>
const { getData } = require("./db/db");
const foods = getData();
const tg = window.Telegram.WebApp;
function App() {
const [cartItems, setCartItems] = useState([]);
const [modalActive, setModalActive] = useState(false);
useEffect(()=>{
tg.ready();
})
const onAdd = (food) => {
const exist = cartItems.find((x) => x.id === food.id);
if (exist) {
setCartItems(
cartItems.map((x) =>
x.id === food.id ? { ...exist, quantity: exist.quantity + 1 } : x
)
);
} else {
setCartItems([...cartItems, { ...food, quantity: 1 }]);
}
};
const onRemove = (food) => {
const exist = cartItems.find((x) => x.id === food.id);
if (exist.quantity === 1) {
setCartItems(cartItems.filter((x) => x.id !== food.id));
} else {
setCartItems(
cartItems.map((x) =>
x.id === food.id ? { ...exist, quantity: exist.quantity - 1 } : x
)
);
}
};
const onCheckout = () => {
let pz = '{';
for (let i = 0; i < cartItems.length; i++ )
{
if (i != cartItems.length - 1)
{
if (cartItems[i].quantity === 1)
{
pz+=('\'' + cartItems[i].title + '\'' +' ' + ':' + ' ' + cartItems[i].price + '00' + ',');
}
if (cartItems[i].quantity != 1)
{
pz+=('\'' + cartItems[i].quantity + 'x' + ' ' + cartItems[i].title + '\'' + ' ' + ':' + ' ' + cartItems[i].price * cartItems[i].quantity + '00' + ',');
}
}
else
{
if (cartItems[i].quantity === 1)
{
pz+=('\'' + cartItems[i].title + '\'' + ' ' + ':' + ' ' + cartItems[i].price + '00' + '}');
}
if (cartItems[i].quantity != 1)
{
pz+=('\'' + cartItems[i].quantity + 'x' + ' ' + cartItems[i].title + '\'' + ' ' + ':' + ' ' + cartItems[i].price * cartItems[i].quantity + '00' + '}');
}
}
}
console.log(pz.toString());
console.log(cartItems);
setModalActive(true);
tg.MainButton.text = "Оформление";
tg.MainButton.show();
tg.onEvent('mainButtonClicked', function(){
tg.sendData(pz.toString());
});
}
return(
<>
<Modal active={modalActive} setActive={setModalActive}/>
<div className="shapka">
<div className="shapka_top"></div>
<h1 className="heading">Каталог</h1>
<Cart cartItems={cartItems} onCheckout={onCheckout} />
</div>
<div className="cards__container">
{foods.map((food) => {
return <Card food={food} key={food.id} onAdd={onAdd} onRemove={onRemove} />
} )}
</div>
</>
);
}
export default App;
Код "Modal.jsx":
import React from "react";
import { useState } from "react";
import "./Modal.css";
const Modal = ({active, setActive, inCart}) => {
return (
<div className={active ? "modal active" : "modal"}>
<div className="shapka_modal">
<h1 className="heading_modal">Ваш заказ</h1>
</div>
<h1>{inCart}</h1>
</div>
);
};
export default Modal;
setModalActive