Camper Leaderboard - Is this the wrong way to do it?

Code Feedback
1

I think I need 3 components:

  • LeaderBoard ( Parent)
  • TableHead (Child of LeaderBoard)
  • TableBody (Child of LeaderBoard)

The LeaderBoard-Component:
When the component will mount this component loads the API-datas and give it as a property to the TableBody

The TableBody-Component:
It will display the datas that the LeaderBoars-Componets gives him as a property

The TableHead-Compnent:
No comes the problem
When someone will click to sort by recent or alltime, how can this component update the TableBody-Component?
Or is can childcomponents talk to each other?

One answer could be, that I only have one component. But I think that there has to be 3 Components… or am I wrong?

Here you can finde the codepen.

2

You can pass functions from Parent as props.

You can have as many components as you like :wink: I did it with one component, but now I’m more inclined to splitting into smaller components.

Here you can see how you can pass function (see console):

http://codepen.io/jenovs/pen/EgKdRL?editors=0010

1 Like
3

Yes, you are right! Thanks! :slight_smile:

But know I have a new problem…
I cant store the JSON in an array…

Has someone maybee a solution or a hint?

_loadData(source){
      var xhr = new XMLHttpRequest();
      xhr.open('GET', source, true);
      xhr.send();
      var data = [];
      xhr.onreadystatechange = processRequest;
      console.log(data);
      console.log(data[0]);
      return data;
      
      function processRequest(e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var response = JSON.parse(xhr.responseText);
          data.push(response);
          return response;
        }
      };
      
    }

The data array stores somethink but I can’t access it. Like you can see in the console…

4

Your

console.log(data);
console.log(data[0]);

get executed before the response is received, that’s why you got empty arrays.

Add console.log(data[0][1]); after data.push(response); in processRequest(e)

5

but:

this.setState({
        recent: this._loadData('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
        alltime: this._loadData('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
});

recent is ‘‘empty’’ too. It stores somethink but I can’t access it.

6

It looks like you are currently editing your code, because it keeps changing all the time, but general idea is that you should either use this.setState() in processRequest(e) or use Promises.

It doesn’t store anything, hover over blue i symbol in console and you’ll see what it stores.

7

thanks @jenovs! There is a fetch API that uses Promises and now it works! :slight_smile:
just for fatching the data I needed 3 houres… haha

 _setState(stateKey, source){
      fetch(source)
        .then(function(response) {
        return response.json();
      })
        .then(function(json) {
        var stateObj = {};
        stateObj[stateKey] = json;
        this.setState(
          stateObj
        );
      }.bind(this))
        .catch(function(error) {
        console.error('Fetch:' + error);
      });
    }
8

I finished it! :smiley:
just have to style it :slight_smile:

Here you can see it on codepen

@jenovs thanks for your help