React: Camper Leaderboard

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 = '';

class App extends Component {
    this.state = {campers: []};
  componentDidMount() {
      .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>
       { => 

export default App;

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!

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