Star wars people

Star wars people

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-table/4.3.1/react-bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<h2>People in Star wars</h2>
<p> Click the Column name to sort WADUP BOI</p>

<div id="tableApp"></div>

React

class StartWarsApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoading: false,
      items: []
    };
    
  }

  componentDidMount() {
  	// Get the data
    fetch("https://swapi.co/api/people")
      .then(res => res.json())
      .then(
        result => {
          var people = result.results;

          // We need to change the number values into integers for sorting.
          for (var key in people) {
            var obj = people[key];
            for (var prop in obj) {
              if (prop == "mass" || prop == "height") {
                obj[prop] = parseFloat(obj[prop]);
              }
            }
          }
          this.setState({
            isLoading: true,
            items: people
          });
        },
        error => {
          this.setState({
            isLoading: true,
            error
          });
        }
      );
  }

  render() {
    const { error, isLoading, items } = this.state;
    if (error) {
      return <h2>{error.message}</h2>;
    } else if (!isLoading) {
      return <div>Looking for people...</div>;
    } else {
      return (
        <BootstrapTable ref="table" data={items} class="table">
          <TableHeaderColumn dataField="name" isKey={true} dataSort>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField="birth_year" dataSort>
            Age
          </TableHeaderColumn>
          <TableHeaderColumn dataField="height" dataSort>
            Heigh
          </TableHeaderColumn>
          <TableHeaderColumn dataField="mass" dataSort>
            Mass
          </TableHeaderColumn>
        </BootstrapTable>
      );
    }
  }
}

ReactDOM.render(<StartWarsApp />, document.querySelector("#tableApp"));