How to map JSON data as a table in React

Question

I'm trying to display data after fetching it, but that does not work :

import React, { Component } from "react";
import { Table, Button, ButtonToolbar } from "react-bootstrap";

const URL = "http://localhost:51644/api/";
let passedAthleteId = 0;
let passedAthleteSessionId = 0;

class AthleteTrainingSession extends Component {
  constructor(props) {
    super(props);
    this.state = {
      athleteTrainingSession: [],
      discussions: [],
      warmups: [],
      workouts: [],
      stretchings: [],
    };
  }

  componentDidMount() {
    this.fetchAthleteTrainingSession();
  }

  componentDidUpdate() {
    this.fetchAthleteTrainingSession();
  }

  fetchAthleteTrainingSession = () => {
    fetch(URL + `Coaches/4/Athletes/1/AthleteSessions/4`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          athleteTrainingSession: data,
        });
      });
  };

  render() {
    const {
      athleteTrainingSession,
      discussions,
      warmups,
      workouts,
      stretchings,
    } = this.state;

    passedAthleteId = this.props.match.params.athleteId;
    passedAthleteSessionId = this.props.match.params.athleteSessionId;
    this.discussions = this.state.athleteTrainingSession.Discussions;
    this.warmups = this.state.athleteTrainingSession.Warmups;
    this.workouts = this.state.athleteTrainingSession.Workouts;
    this.stretchings = this.state.athleteTrainingSession.Stretchings;
    console.log(athleteTrainingSession);
    console.log(this.warmups);

    return (
      <React.Fragment>
        <div>
          <h2 className="mt-2">
            Programme d'entraînement :{" "}
            {athleteTrainingSession.TrainingProgramName}
          </h2>
          <h4>
            Séance d'entraînement : {athleteTrainingSession.TrainingSessionName}
          </h4>
        </div>
        <div>
          <ButtonToolbar>
            <Button variant="primary">Ajouter</Button>
            <Button variant="secondary">Discussion</Button>
          </ButtonToolbar>
          <h4>Échauffement</h4>
          <Table className="mt-4" striped bordered hover size="sm">
            <thead>
              <tr className="d-flex">
                <th className="col-6">Exercice</th>
                <th className="col-6">Options</th>
              </tr>
            </thead>
            <tbody>
              {warmups.map((warm) => (
                <tr className="d-flex" key={warm}>
                  <td className="col-6">{warm.ExerciseName}</td>
                  <td className="col-6">
                    <ButtonToolbar>
                      <Button className="mr-2" variant="info">
                        Modifier
                      </Button>
                      <Button className="mr-2" variant="danger">
                        Supprimer
                      </Button>
                    </ButtonToolbar>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </div>
      </React.Fragment>
    );
  }
}

export default AthleteTrainingSession;

athleteTrainingSession contains the fetched data, and warmups is a sub-object for athleteTrainingSession. When I console.log(warmups), I can see that it does contain data, but I cannot display it in the table.

athleteTrainingSession contains the fetched data, and warmups is a sub-object for athleteTrainingSession. When I console.log(warmups), I can see that it does contain data, but I cannot display it in the table.

Answer 1

I think you have misconception of using state in component. You're able to console the warmups because in your code you console.log(this.warmups), but you render the map with this.state.warmups

you should setState all of the data that you get from fetch, i.e:

  fetchAthleteTrainingSession = () => {
    fetch(URL + `Coaches/4/Athletes/1/AthleteSessions/4`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          athleteTrainingSession: data,
          warmups: data.Warmups,
          workouts: data.Workouts,
          discussions: data.Discussions,
          stretchings: data.Stretchings,
        });
      });
  };

by doing this way, now you can access the warmups data from this.state.warmups then render it

render() {
  const {
    athleteTrainingSession,
    discussions,
    warmups,
    workouts,
    stretchings,
  } = this.state;

  return (
    <React.Fragment>
      ...
      {warmups.map((warm) => (
        <tr className="d-flex" key={warm}>
          <td className="col-6">{warm.ExerciseName}</td>
          <td className="col-6">
            <ButtonToolbar>
              <Button className="mr-2" variant="info">
                Modifier
              </Button>
              <Button className="mr-2" variant="danger">
                Supprimer
              </Button>
            </ButtonToolbar>
          </td>
        </tr>
      ))}
      ...
    </React.Fragment>
  )
}