So I have been trying to fetch this data from https://bad-api-assignment.reaktor.com/rps/history to my node.js back-end and display it on my React front-end.

I can somehow make it work and see the data at the console, but when refreshing the front-end page, I will get errors like this when trying to handle the data again:

App.js:

    import axios from "axios";
    import React from "react";
    import GameData from "./GameData";
    
    export default function App() {
      const [games, getGames] = React.useState(null);
      const baseURL = "http://localhost:5000";
    
        React.useEffect(() => {
           getAllGames();
        }, []);
    
        const getAllGames = async () => {
            await axios.get(baseURL)
            .then((response) => {
                const allGames = response.data.data;
                //console.log(allGames)
                getGames(allGames);
            })
            .catch(error => console.error('Error: $(error'));
        }
            return(
                <GameData games={games}/>
            )
    }

GameData.js:

import React from 'react';

export default function GameData(props) {
    const displayGames = (props) => {
        const {games} = props;

        console.log(games)

        games.map((game, index) => {
            console.log(game, index);
                return(
                    <div className='game' key={game.type}>
                    </div>
                )
        }
        )
    }
    return(
        <>
        {displayGames(props)}
        </>
    )
}

On GameData.js, if I comment this section:

//games.map((game, index) => {
//  console.log(game, index);
//      return(
//          <div className='game' key={game.type}>
//          </div>
//      )
//}
//)

I can see that console.log(games) at my console. Then I can un-comment those lines and save on React, and it will display mapped data on console: Console after un-commenting code and saving on React.

Okay so perfect, it works so far as I wish, but if I refresh the page on my browser, I will face the error/null issue Console error messages after page refresh.

I have been trying to google that but could not figure it out. How to solve issue like this? I should be able to sort that data later as well and so on.

Hope it makes sense.