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> ); }
Necesitará sus jugadores de su pregunta anterior . Lo sé porque me hiciste un ping en la otra pregunta. Pero deberías agregar más contexto como dice David.
Puedes encontrar el código aquí