Я изучаю reactj, создавая самое простое приложение-магазин, используя react hooks, без редакса. Не работает функция добавления товаров в корзину. В родительском компоненте 'MainPage' находятся карточки товаров. При нажатии на кнопку карточки, в компонент 'Basket' должен добавляться компонент 'AddedProduct' с соответствующими данными конкретного товара, взятыми из массива объектов 'productsDataArray'. Ниже привожу компоненты, имеющие отношение к добавлению товаров. Думаю, проблема в функциях 'updateContent' или 'clickBtn'. Помогите решить проблему добавления товаров.
export const MainPage = props => { {/* parent component with product cards*/}
const [basketContent, changeBasketContent] = useState([]);
const updateContent = (product) => {
const addedItems = productsDataArray.filter(item => item.id == product.id);
return (
<div>
<AddedProducts productData = {product} />
</div>
);
changeBasketContent(addedItems);
};
const clickBtn = (e) => {
updateContent(e.target);
};
return (
<div>
<div id = 'productSection'>
{productsDataArray.map(item => {
return (
<div key = {item.id}>
ProductCard productData = {item}
clickBtn = {clickBtn}
/>
</div>
);
}
)}
</div>
<Basket/>
</div>
);
};
export const ProductCard = props => {
const {productData, clickBtn} = props;
return (
<div id = 'productCard' style = {{width: '300px'}}>
<img src = {productData.photo} alt = {productData.name} height = "200" />
<div>
<h6>{productData.name}</h6>
<div>
<p>Price: {productData.price}</p>
<button type = 'button' onClick = {clickBtn}>
Add to basket
</button>
</div>
</div>
</div>
);
};
export const Basket = props => {
const {basketContent} = props;
return (
<section id = 'basket-bloc'>
<div id = "basket-main">
{basketContent}
</div>
</section>
);
};
export const AddedProduct = props => {
const {productData} = props;
return (
<div id = 'addedProduct'>
<div id = 'product-img-small' className = 'basketItem'>
<img src = {productData.photo} width = '50'
alt = {productData.name} />
</div>
<div id ='product-name' className = 'basketItem'>
<p>{productData.name}</p>
</div>
</div>
);
};
export const productsDataArray = [
{
id : 1.1,
name: "Title1",
price: "10$",
photo: img1
},
{
id : 1.2,
name: "Title2",
price: "20$",
photo: img2
},
{
id : 1.3,
name: "Title3",
price: "30$",
photo: img3
},
{
id : 1.4,
name: "Title4",
price: "25$",
photo: img4
}
];