My react page is blank when i run npm start however there is data within the array on console logs and no errors

I am trying to create a leader board as part of a website project I’m working on. The leader board is pulling data from a spring boot API and pushing it through to the react frontend. However when I run Npm start, the page is blank and when I check developer tools, there are no errors and the data is there. I will attach some pictures below.

Blank react page and console log

Board.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Profiles from './profiles';

export default function Board() {
  
  const [Leaderboard, setLeaderboard] = useState([]);

useEffect(() => {
  loadLeaderboard();
}, []);

const loadLeaderboard = async () => {
  const result = await axios.get("http://localhost:8080/Leaderboard");
  setLeaderboard(result.data);
};


  console.log(Leaderboard);


  const sortedLeaderboard = Leaderboard.sort((a, b) => b.score - a.score);
  
  return (
    <div className="board">
        <h1 className='leaderboard'>Leaderboard</h1>
        <Profiles   Leaderboard={sortedLeaderboard}></Profiles>
    </div>
  )
}

Profiles.js

import React from "react";
export default function Profiles({ Leaderboard }) {
  return (
    <div id="profile">
      {item(Leaderboard)}
    </div>
  );
}
function item(Leaderboard) {
  return (
    <>
      {Leaderboard.map((value, index) => (
        <div className="flex" key={index}>
          <div className="item">
            <img src={value.Image} alt="" />

            <div className="info">
              <h3 className="name text-dark">{value.Name}</h3>
              <span>{value.location}</span>
            </div>
          </div>
          <div className="item">
            <span>{value.Score}</span>
          </div>
        </div>
      ))}
    </>
  );
}
  

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

Package.json

{
  "name": "leaderboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.4",
    "browserify": "^17.0.0",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "http-proxy-middleware": "^2.0.6",
    "mysql": "^2.18.1",
    "mysql2": "^3.2.0",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "timers-browserify": "^2.0.12",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "browserify-zlib": "^0.2.0",
    "net-browserify": "^0.2.4",
    "stream-browserify": "^3.0.0",
    "tls-browserify": "^0.2.2"
  }
}

The backend is working perfectly so i believe the problem is due to the frontend. The blank page also has a scroll bar which leads me to believe the data is being pushed through however it is not visible.

>Solution :

You are using the wrong object keys in Profiles.js. In you array, you have mentioned name and in code, you are rendering Name

updated code:

import React from "react";
export default function Profiles({ Leaderboard }) {
  return (
    <div id="profile">
      {item(Leaderboard)}
    </div>
  );
}
function item(Leaderboard) {
  return (
    <>
      {Leaderboard.map((value, index) => (
        <div className="flex" key={index}>
          <div className="item">
            <img src={value.image} alt="" />

            <div className="info">
              <h3 className="name text-dark">{value.name}</h3>
              <span>{value.location}</span>
            </div>
          </div>
          <div className="item">
            <span>{value.score}</span>
          </div>
        </div>
      ))}
    </>
  );
}

Keys are case-sensitive