React: Camper Leaderboard

React: Camper Leaderboard
0.0 0

#1

I am testing out the data fetched from fcctop100 API by printing the username out , but it keeps throwing “Loading…”. I wonder where I did wrong.

import React, { Component } from 'react';
import fetch from 'isomorphic-fetch';
import './App.css';

const API_30 = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {campers: []};
    }
  componentDidMount() {
    fetch(API_30)
      .then(response => response.json())
      .catch(error => console.error('Error:', error))
      .then(data => this.setState({ campers: data.campers })
      );
     
  }

  render() {
if(!this.state.campers){return <p>Loading...</p>}
    return (
     <div className="App">
        <h1 className="Table-header">FreeCodeCamp Leaderboard</h1>
       {this.state.campers.map((camper) => 
         <div>{camper.username}</div>
       )
         
       }
        
          </div>);
  }
}

export default App;


#2

This is simply because an empty array, [], is not a falsy value, so !this.state.campers will always return true (it’s worth noting that an empty object {} is also not falsy).

I hope that helps!


#3

Maybe think about how you could use the campers array’s length property?