Estoy tratando de implementar un carrito de compras en React. Creé un contexto para mi carrito que maneja la cantidad comprada y funciona bien. Sin embargo, tengo un problema al mostrar los datos del contexto del carrito en la página del carrito. Aquí está mi código para mostrar los artículos comprados en la página del carrito.

 export class Cart extends React.Component { constructor(props) { super(props); } render(){ return ( <> <div> <h1>Cart</h1> </div> <CartContext.Consumer> { (cartContext) =>{ const {productsToPurchase} = cartContext console.log(productsToPurchase) if (productsToPurchase.length === 0){ return(<h1>Cart is empty</h1>) } else { productsToPurchase.map( (product) =>{ // console.log works fine console.log("Reached Else Statment") console.log(product.itemId) // return doesn't work return( <h1 key={product.itemId + "-cart"}> 8525552 </h1> ) }) } } } </CartContext.Consumer> </> ) } }

He hecho lo mismo y funcionó. No tengo idea de por qué mi función de mapeo no muestra los datos que necesito. Revisa los comentarios por favor para más detalles