import React, { useState, useEffect } from 'react'; import './Leaderboard.css'; //const Leaderboard = ({hashmap}) => { // var listItems = Object.keys(hashmap).map(playerName => { // var rank = hashmap[playerName]; // return
  • // {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw} //
  • // }); // return ; const Leaderboard = () => { const [data, setData] = useState(null); useEffect(() => { fetch('/api/leaderboard') .then((response) => response.json()) .then((data) => { setData(data); }) .catch((err) => { console.log(err.message); }); }, []); if (data == null) return Loading... const tableRows = Object.keys(data).map(playerName => { var rank = data[playerName]; return ( {playerName} {rank.gamesPlayed} {rank.gamesWon} {rank.gamesDraw} ); }); return (
    { tableRows }
    Name Played Won Draw
    ); }; export default Leaderboard;