score:2

Accepted answer
import React, { Component } from 'react';
// packages
import axios from 'axios';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import * as ReactBootStrap from 'react-bootstrap';

class DisplayTable extends Component {
  // class constructor
  constructor(props) {
    super(props);
    this.state = {
      players: [],
      loading: false,
    };
  }

  // async all data while component mount
  async componentDidMount() {
    try {
      const data = await axios.get(
        "https://nba-players.herokuapp.com/players-stats"
      );
      console.log(data);
      this.setState({ players: data.data });
    } catch (e) {
      console.log(e);
    }
  }

  // render starts from here
  render() {
    const { players } = this.state;

    const columns = [
      { dataField: "name", text: "name" },
      { dataField: "points_per_game", text: "points_per_game" },
      { dataField: "team_name", text: "team_name" },
    ];

    return (
      <div>
        <BootstrapTable
          keyField="name"
          data={players}
          columns={columns}
          pagination={paginationFactory()}
        />
      </div>
    );
  }
}

export default DisplayTable;

Related Query

More Query from same tag