Leader board - map() not creating all <li> [SOLVED]

Well, I’ve been beating my head against the desk for three hours now and it’s time for bed. Maybe someone else has a good idea.

Not all the rows are getting created (especially at the bottom of the “recent” list).

At first I thought it was an asynchronous problem, but a console.log inside the map function shows that it is iterating through each array element and has the data - it just isn’t getting returned to the html. And it seems to be consistent from run to run

The console.log in the getJSON is reporting completion (console.log) after the initial map function, but not subsequent maps. Am I misunderstanding something here? Does it buffer that data once at the initial render and never check it again? Maybe I’m misunderstanding data binding.

I’m still figuring out react. What am I doing wrong here?

http://codepen.io/ksjazzguitar/pen/YVGBvy?editors=0010

Thanks in advance.

I believe you have 99 rows appearing so I can’t see the problem.
(Apart from the fact it should be 1-100)

I am with Johnny, I am not experiencing any issues except for the last user is missing in recent and all-time. I like the way you did this. Good luck finding out where the last camper is going.

I’m sorry, but if you’re getting the same results that I am, you need to look more closely. Yes, for the “alltime” stats, it seems to load them all, except for the clearly missing #100, if you look more closely you’ll see that others are missing, for example 33, 39, 83, and 84. The “recent” stats are even worse, for example missing 72-87.

Again, I know that they are beeing seen by the map function as the console.log outputs every data point. But for whatever reason, they are not getting outputed into the html.

Found it!

I went in and made the rendering part of the callback to the getJSON call - still failing. I put in a boolean loaded state variable and made rendering conditional - still failing. So I just started deleting parts of the rendering to see if something there was causing the problem. Found it!

the line:

              <li className="list-group-item" camper={camper} key={camper.alltime}>

see it yet? It’s the key - it must be unique. When I started writing this, I was thinking that that property was the rank so it was unique. But of course it’s a score so it doesn’t have to be. The li with the same key were causing problems. When I replaced it with:

              <li className="list-group-item" camper={camper} key={i+1}>

Everything works now. Sorry, rookie mistake. Keys must be unique. I was so distracted by react and ajax that I forgot something more basic.

Thanks anyway.