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.

Devin Ekadeni · Accepted Answer · 2020-05-22 18:12:20Z

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

answered May 22, 2020 at 18:12

Devin Ekadeni

6486 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wAeLoS Over a year ago

Thank you very much, it works now, and I understand better the utility of setState.

Collectives™ on Stack Overflow

How to map JSON data as a table in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related