Mi componente no se mostrará en la página. No hay errores ni otras advertencias/mensajes. Registro en la consola el valor de gameData y todos los datos son como deberían ser. Aquí está la función exportada:
export default function AllGameDeals( gameData ){ const dealArr = new Array() const deals = () => { gameData.deals.map((deal) => { const imageSrc = `https://www.cheapshark.com/img/stores/icons/${(parseInt(deal.storeID)-1)}.png` deal.imageSrc = imageSrc dealArr.push(deal) }) return dealArr } deals() return ( <div> {dealArr.forEach(gameDeal => ( <Box key={gameDeal.dealID} display={{ md: "flex" }} boxShadow="dark-lg" p={4} > <Box flexShrink={0}> <Image borderRadius="lg" width={{ md: 40 }} height={{ md: 20 }} src={gameData.info.thumb} alt={gameData.info.title} /> </Box> <Box> <Image src={gameDeal.imageSrc} alt={gameDeal.storeID} /> </Box> <Box> <Text>{gameDeal.price}</Text> </Box> </Box> ))} </div> ) }Siento que me estoy perdiendo algo muy obvio...
Intente cambiar de dealArr.forEach a dealArr.map.
La razón es que .forEach no devuelve nada, pero .map devuelve una matriz.
Debería usar .map en lugar de .forEach porque .forEach en realidad no devuelve un valor
Otras posibles mejoras:
useEffect para obtener datos sobre el montaje del componente (en lugar de obtenerlos cada vez)useState para "persistir" su estado dentro del componente