so i want to show a table that displays the status of attendance in a day for a specific player (present, absent, sick , injured, late). in each object we have the player and the status of that day.

This is the structure i choose because it looks like the best one even for back-end to send. but im not sure if that's the best one. if you have an other suggestion for an other structure would be glad to hear it.

im struggling at showing the status of the person at the specific date. idk how to show the map to do so

click to see the table that i need to do for a better visualization

for now i need just the showing in a string for the status later the fancy things. Would really appreciate it if someone could take a look at this

this is the link of he code to work better : https://stackblitz.com/edit/react-gdpfjh?file=src%2FApp.js

the code

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [overall, setoverall] = useState([
    {
      date: '01-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'absent' },
      ],
    },
    {
      date: '03-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'absent' },
        { playerName: 'Gimi', playerId: '2', status: 'absent' },
      ],
    },
    {
      date: '05-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'present' },
      ],
    },
    {
      date: '08-01-2020',
      attendance: [
        { playerName: 'Miri', playerId: '1', status: 'present' },
        { playerName: 'Gimi', playerId: '2', status: 'injured' },
      ],
    },
  ]);
  return (
    <div>
      <table border="1px" width="100%">
        <tbody>
          <tr>
            <th width="100px"></th>
            {overall.map((item) => (
              <th key={item.date}>{item.date}</th>
            ))}
          </tr>
          {overall[0].attendance.map((item) => (
            <tr key={item.playerId}>
              <td>{item.playerName}</td>
              <td>{item.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}