FCC React Leaderboard Problem - Probably easy to solve(SOLVED)

1

Hey everyone.

I have a problem with my Leaderboard pen. Basically, in my render function, when it tells it to show the list of campers, it displays the JSX (treating it like a paragraph text) instead of reading the JSX to see what to display. I am sure there is something that I am missing. I am so close!

Thanks for the help. I put notes at the important places.

//I map out the JSX into a list and return the array with .join()
   mapItOut() {
        let displayList = [];
        let listOfUsers = this.state.posts;
        console.log(this.state);
        listOfUsers.map(function(item, index) {
          displayList.push('<div class="well col-xs-4 col-xs-offset-4" key=' + index + '><div class="row"><img class="img-rounded img-responsive" style="float: left; margin: 0px 15px 15px 0px;" width="25%" src=' + item.img + ' />Name: ' + item.username + '<br />Recent: '+ item.recent +'<br />  All Time: '+ item.alltime +'</div></div>')
        })
        return (displayList.join()); //This is it
      }
      render() {
        return (<div><div className="row text-center">
  <img className="page-header img-rounded" src={headerURL} />
  </div>
  <div className="row text-center">
    <button id="recent" className="btn btn-success" onClick={() => this.recentOnClick()}>Recent</button>
    <button id="allTime" className="btn btn-success" onClick={() => this.allTimeOnClick()}>All Time</button>
  </div>

//This is where the function is called
  <div id='display'>{this.mapItOut()}
        </div></div>)
      }
    }

This is what it looks like…

Screen Shot 2017-04-01 at 6.25.45 PM.png1043×462 119 KB

Here is a link to the project - http://codepen.io/escottalexander/pen/GWzjWv?editors=0110

Thanks!!!

2

I’m not so sure you need that mapItOut function. It’s basically doing extra work, because you can handle all of that inside the render function. When you call the api, you get the list of users as an array. In your render function, you can use a ternary you check if posts is empty or not. If it’s not, you map the posts and return the JSX, else return null.
You don’t need to push the JSX into another array.
And in the return of the render function you can reference listOfUsers directly with brackets.

3

First off, you need to change your JSX elements in the displayList array. They should be JSX elements, not strings. So, instead of '<div class="well col-xs-4... />' it should just be <div className="well col-xs-4..." /> like a normal JSX element.

Second, remove .join() from the array you return in mapItOut. JSX is smart enough to know that an array of JSX elements should be split into individual elements.

1 Like
4

Oh yes, I originally had them set up with className and switched it because I used jQuery to post it to the body, but I didn’t like the result since I wasn’t using React. I removed .join() and added className. Still no change. code-chivy, Could you explain what you mean a bit more about the ternary?

5

I did it guys! I was looking at other ways people have done it and so I switched it so that I use map on this.state.posts inside of the render function. I think that might have been what you were saying to do, code-chivy. Anyways, thanks for the help!

6

Hey sorry for the late reply! Yeah you can do all that inside the render function. Congrats on getting it to work!