My component will not display on the page. There are no errors or any other warnings/messages. I console log the value of gameData and all the data is as it should be. Here's the exported function:

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>
        
    )
    
}

I feel like I am missing something very obvious...

CodePudding user response：

Try changing from dealArr.forEach to dealArr.map.

The reason is that .forEach returns nothing, but .map returns an array.

CodePudding user response：

You should be using .map instead of .forEach because .forEach doesn't actually return a value

Other possible improvements:

1. Use useEffect to fetch data on mount of the component (instead of fetching everytime)
2. Use useState to "persist" your state within the component