# My version of FreeCodeCamp Leaderboard

**URL:** <https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601>\
**Category:** I Built This\
**Created:** [July 24, 2016, 9:47pm UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601 "2016-07-24T21:47:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![fremdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fremdev/32/160830_2.png) [@fremdev](https://forum.freecodecamp.org/u/fremdev)\
**Post date:** [July 24, 2016, 9:47pm UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/1 "2016-07-24T21:47:10Z")

</div>

Take a look at my version of FreeCodeCamp Leaderboard:  
[http://codepen.io/fremdev/pen/QEAqOp/](http://codepen.io/fremdev/pen/QEAqOp/)  
Using React.js, AJAX requests with fetch(), stateless functions, Sass, Babel, Webpack. You can find full version of the project on GitHub: [https://github.com/fremdev/leaderboard/](https://github.com/fremdev/leaderboard/)

---

<div class="post-metadata">

**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\
**Post date:** [July 24, 2016, 11:13pm UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/2 "2016-07-24T23:13:41Z")

</div>

This isn’t working for me on an iPhone - I get the table headers, but no rows…

---

<div class="post-metadata">

**Author:** ![fremdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fremdev/32/160830_2.png) [@fremdev](https://forum.freecodecamp.org/u/fremdev)\
**Post date:** [July 25, 2016, 9:05am UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/3 "2016-07-25T09:05:39Z")

</div>

Thank you for pointing me this!  
That’s true - because I’m using fetch() for AJAX requests and it hasn’t a support for all browsers yet. But in my full version(code on [GitHub](https://github.com/fremdev/leaderboard)) I’m using [fetch polyfill](https://github.com/github/fetch) and it should work well for all browsers including Safari 6.1+

---

<div class="post-metadata">

**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\
**Post date:** [July 25, 2016, 9:32am UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/4 "2016-07-25T09:32:06Z")

</div>

I suspected that…I just started using fetch today and had the same issue 🙂

I don’t want to peek at your code as I haven’t finished it yet, but did you string a bunch of promises together in your fetch().then() chain and stick your react DOM render call in there, or did you handle it a different way?

That’s how I’ve done it so far, but I’m pretty dissatisfied with it…

---

<div class="post-metadata">

**Author:** ![fremdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fremdev/32/160830_2.png) [@fremdev](https://forum.freecodecamp.org/u/fremdev)\
**Post date:** [July 25, 2016, 9:56am UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/5 "2016-07-25T09:56:36Z")

</div>

I don’t understand well what do you mean as [quote=“JacksonBates, post:4, topic:22601”]  
stick your react DOM render call in there  
[/quote]  
I use fetch() inside [componentDidMount](https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount) function for my Leaderboard component(which I use for handling state of my app)

---

<div class="post-metadata">

**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\
**Post date:** [July 25, 2016, 10:03am UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/6 "2016-07-25T10:03:38Z")

</div>

```auto
let APICampers = [];

fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
.then((response) => response.json())
.then((data) => APICampers = data)
.then(() => {
  for (let i = 0; i < APICampers.length; i++) {
    APICampers[i]["rank"] = i + 1;
  };
})
.then(() => {
  const app = document.getElementById('app');
  ReactDOM.render(<CamperTable campers={APICampers} />, app);
});

```

I haven’t heard of your method, I’ll look into it 🙂

---

<div class="post-metadata">

**Author:** ![fremdev](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fremdev/32/160830_2.png) [@fremdev](https://forum.freecodecamp.org/u/fremdev)\
**Post date:** [July 25, 2016, 10:23am UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/7 "2016-07-25T10:23:21Z")

</div>

No, I do it another way - first .then as you(for parsing json) - and only one more .then for saving data inside state object using setState

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:10pm UTC](https://forum.freecodecamp.org/t/my-version-of-freecodecamp-leaderboard/22601/8 "2021-06-01T18:10:22Z")

</div>

Closed on June 1, 2021, 6:10pm UTC