entonces quiero mostrar una tabla que muestre el estado de asistencia en un día para un jugador específico (presente, ausente, enfermo, lesionado, tarde). en cada objeto tenemos el jugador y el estado de ese día.

Esta es la estructura que elijo porque parece la mejor para enviar incluso para el back-end. pero no estoy seguro si ese es el mejor. Si tiene alguna otra sugerencia para otra estructura, estaría encantado de escucharla.

Estoy luchando por mostrar el estado de la persona en la fecha específica. nose como mostrar el mapa para hacerlo

click para ver la tabla que debo hacer para una mejor visualización

por ahora solo necesito que se muestre en una cadena para el estado más tarde las cosas elegantes. Realmente agradecería si alguien pudiera echar un vistazo a esto

este es el enlace del código para que funcione mejor : https://stackblitz.com/edit/react-gdpfjh?file=src%2FApp.js

el código

 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> ); }