cannot display item by passing value from another component - reactjs

Question

I wanna display my cart item inside my CartList component but for some reason, it doesn't work out...Is there anything wrong with the way i destructure the cart variable able or anything? please help me! Thank you so much!
context.js:
class ProductProvider extends React.Component {
state = {
products: storeProducts,
detailProduct: detailProduct,
cart: storeProducts,
modalOpen: false,
modalProduct: detailProduct
};
getItem = (id) => {
const product = this.state.products.find((item) => item.id === id);
return product;
};
addToCart = (id) => {
let tempProducts = [...this.state.products];
const index = tempProducts.indexOf(this.getItem(id));
const product = tempProducts[index];
product.inCart = true;
product.count = 1;
const price = product.price;
product.total = price;
this.setState(() => {
return (
{ products: tempProducts, cart: [...this.state.cart, product] },
() => console.log(this.state)
);
});
};
openModal = (id) => {
const product = this.getItem(id);
this.setState(() => {
return { modalProduct: product, openModal: true };
});
};
closeModal = (id) => {
this.setState(() => {
return { modalOpen: false };
});
};
render() {
return (
<ProductContext.Provider
value={{
...this.state,
addToCart: this.addToCart,
openModal: this.openModal,
closeModal: this.closeModal
}}
>
{this.props.children}
</ProductContext.Provider>
);
}
}
Cart.js:
import React from "react";
import CartColumns from "./CartColumns";
import CartList from "./CartList";
const ProductContext = React.createContext();
export default class Cart extends React.Component {
render() {
return (
<div>
your cart
<ProductContext.Consumer>
{(value) => {
if (value && value.length > 0) {
return (
<div>
<CartColumns />
<CartList value={value}/>
</div>
);
}
}}
</ProductContext.Consumer>
</div>
);
}
}
CartItem.js:
import React from "react";
function CartItem() {
return <div>this is a cart item</div>;
}
export default CartItem;
CartList.js:
import React from "react";
import CartItem from "./CartItem"
export default class CartList extends React.Component {
{value =>{
return <div>
{cart.map((item) => {
return (
<CartItem key={item.id} value={value} item={item}/>
)
}}
</div>;
}}
}
export default CartList;
Sandbox link: https://codesandbox.io/s/cart-code-addict-buz0u?file=/src/cart/CartList.js

Answer 1

first of all fixed your cartList component
import React from "react";
import CartItem from "./CartItem"
export default function CartList (props) {
const {cart} = props
return (
<div>
{cart.map((item) => (
<CartItem key={item.id} item={item} />
))}
</div>
)
}