** I can't figure out the problem here. Can anyone help me please ** When I pass item as props I got TypeError: Cannot destructure property 'name' of 'item' as it is undefined.
ProductsPage.js
...
const ProductsPage = ({ products, currentUser }) => {
.....
// note: products is an array with objects of product each product has id, name, image and price
return (
<div className="products-page">
....
..
<div className="products-page__content">
{filteredProducts.map((item) => ( // I try to console.log(item) and I get whole object
<Product key={item.id} item={item} />
))}
</div>
</div>
);
};
........
Product.js
function Product({ item, addItem }) {
const { name, price, image } = item;
return (
<article className="product">
<Link to="/products/" className="product__searchbox">
<BiSearch className="product__search-icon" />
</Link>
<img src={image} alt={name} className="product__img" />
<div className="product__footer">
<h4 className="product__title">{name}</h4>
<span className="product__price">
{new Intl.NumberFormat("de-DE", {
style: "currency",
currency: "EUR",
}).format(price)}
</span>
</div>
<CustomButton inverted onClick={() => addItem(item)}>
Add to Cart
</CustomButton>
</article>
);
}
....
This is a common issue where data is passed down from a parent. Provide a default for your item:
function Product({ item, addItem }) {
const { name, price, image } = item || {};
....