ReactTableApp.js

import React, { Component } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

class App extends Component {
  // Constructor is not needed if you don't need to compute initial state
  state = { data: [] };

  indexData = (item, index) => ({ ...item, id: index + 1 });

  fetchPromise = url => {
    return fetch(url)
      .then(response => response.json())
      .then(data => data.results.map(this.indexData));
  };

  fetchAsync = async url => {
    const response = await fetch(url);
    const data = await response.json();
    return data.results.map(this.indexData);
  };

  async componentDidMount() {
    const url = "https://swapi.co/api/people";

    // Vanilla Promises
    // this.fetchPromise(url)
    //   .then(data => this.setState({ data }))
    //   .catch(error => console.error(error));

    // Async Function
    try {
      const data = await this.fetchAsync(url);
      this.setState({ data });
    } catch (error) {
      console.error(error);
    }
  }

  render() {
    const columns = [
      { Header: "#", accessor: "id" },
      { Header: "Character Name", accessor: "name" },
      { Header: "Character Gender", accessor: "gender" },
      { Header: "Birth Year", accessor: "birth_year" }
    ];
    return (
      <div>
        <h1>Table Demo</h1>
        <ReactTable columns={columns} data={this.state.data} />
      </div>
    );
  }
}

export default App;