Full-Stack React Projects - Second Edition

Rendering lists of games

We will render all the games available on the platform on the home page of the application. To implement this feature, the Home component will first fetch the list of all the games from the game collection in the database using the list game API. We will achieve this in an useEffect hook in the Home component, as shown in the following code:

mern-vrgame/client/core/Home.js:

  useEffect(() => {    const abortController = new AbortController()    const signal = abortController.signal    list(signal).then((data) => {      if (data.error) {        console.log(data.error)      } else {        setGames(data)      }    })    return function cleanup(){      abortController.abort()    }  }, [])

The list of games retrieved from the server in this useEffect hook will be set to ...