How to make an API call and display it in a Table With React?

Question

I am trying to make a component that will display API data in a table. The API is hosted on heroku at: https://protravelete-api.herokuapp.com/getAllEvents Here is a sample of the format that the API is returning in case that helps:

[
{"date":"2020-10-16","distance":5,"email":"sampleemail1@gmail.com","location":"sampletown1","name":"testperson","pace":"7","time":"16:00"},
{"date":"2020-10-18","distance":15,"email":"sampleemail2@gmail.com","location":"sampletown2","name":"testperson2","pace":"6","time":"19:00"}
]

The current component code is copied and pasted below:

import React from 'react';
import './Table.css';

export class ShowAllEvents extends React.Component {


    constructor(props) {
       super(props)
       this.state = {
            events: []
       }
    }

    componentWillMount() {
      const url = "https://protravelete-api.herokuapp.com/getAllEvents"; 
      fetch(url)
      .then(response => response.json())
      .then(content => content) 
      .then(events => {
         console.log(events)
         this.setState(events)
      })
  
      .then(console.log(this.state.events))
    }

 
    renderTableHeader() {
       let header = Object.keys(this.state.events[0])
       return header.map((key, index) => {
          return <th key={index}>{key.toUpperCase()}</th>
       })
    }
 
    renderTableData() {
       return this.state.events.map((events, index) => {
          const {date, distance, email, location, name, pace, time } = events //destructuring
          return (
             <tr key={name}>
                <td>{name}</td>
                <td>{location}</td>
                <td>{date}</td>
                <td>{time}</td>
                <td>{distance}</td>
                <td>{pace}</td>
                <td>{email}</td>
             </tr>
          )
       })
    }
 
    render() {
       return (
          <div>
             <h1 id='title'>All Upcomming Events</h1>
             <table id='events'>
                <tbody>
                   <tr>{this.renderTableHeader()}</tr>
                   {this.renderTableData()}
                </tbody>
             </table>
          </div>
       )
    }
 }
 

Anyone out there who can help? I'm sure my problems are just stupid mistakes, I am very new to using React, so my code is pretty messy.

Answer 1

Use response.json() instead of response.text

 componentWillMount() {
  const url = "http://127.0.0.1:5000/getAllEvents"; 
  fetch(url)
  .then(response => response.json())
  .then(contents => console.log(contents))
  .then(events => this.setState(events))

  .then(console.log(this.state.events))
}

Answer 2

You forgot to return the response in the second the thenable chain, which return undefined to third then . events become undefined. Try like this.

UPDATED: Use componentDidMount for AJAX calls, recommended by React .

  componentDidMount() {
    const url = "http://127.0.0.1:5000/getAllEvents"; 
    fetch(url)
    .then(response => response.json())
    // .then(content => content) // This can be optional if you don't map the response
    .then(events => {
       console.log(events)
       this.setState({ events })
    })
  }

renderTableHeader() {
  if (!this.state.events.length) return null
  const header = Object.keys(this.state.events[0]) // Earlier, you're getting error here
  return header.map((key, index) => {
    return <th key={index}>{key.toUpperCase()}</th>
  })
}