0

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>
  );
}
Jurgen Tafaj
  • 35
  • 7
  • Welcome to Stack Overflow! In what way is your code not working as expected? Please elaborate on the specific problem you are observing and what debugging you have done. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Apr 12 '22 at 20:44
  • @David im more asking for some way to solve it not cause im getting an error but i want some guide. i tired searching but didnt found what i needed – Jurgen Tafaj Apr 12 '22 at 21:12
  • 1
    Please see [Why is “Can someone help me?” not an actual question?](https://meta.stackoverflow.com/q/284236/328193) You are encouraged to make an attempt. If during your attempt you encounter a specific problem, such as a specific operation producing an error or an unexpected result, we can help with that. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Apr 12 '22 at 21:13

1 Answers1

0

You will need your players from your previous question. It know this because you pinged me on the other question. But you should add more context like David says.

You can find the code here

Ramses
  • 41
  • 3
  • thanks for the answer again. as i see there a lot of js function that i dont know and can be a real help (like .filter the previous question, .find in this one etc.) do you have a video recommendation when there are the _essential_ function – Jurgen Tafaj Apr 16 '22 at 14:44
  • Hehe, i date back from before youtube ;) i always say, [RTFM](https://en.wikipedia.org/wiki/RTFM), for javascript [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) works like a charm ;) Getting [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) right will help alot, my personal favorite function – Ramses Apr 19 '22 at 07:06
  • if you wouldnt mind can you take a look at this other question https://stackoverflow.com/questions/73595816/forming-a-structure-to-save-the-answers-dynamically-from-a-table, thanks for everything – Jurgen Tafaj Sep 05 '22 at 09:44