Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Thinking in Components Loops and Lists in JSX

Chris Tsantiris
Chris Tsantiris
587 Points
Posted by Chris Tsantiris
Chris Tsantiris
587 Points

My players component isn't displaying, why not?

Hi, My code appears to be identical to Jim's, and it worked for me until the most recent step. Players are not displaying at all, but the scoreboard header is. The console is not showing any errors, and the React tools is showing players: Array[3] with each of my players listed with read-only props. What is going wrong with my code? Thanks.

Akosua Kernizan
Akosua Kernizan
19,994 Points

Can you show your code?

Chris Tsantiris
Chris Tsantiris
587 Points
Chris Tsantiris
Chris Tsantiris
587 Points

For some reason it doesn't look good when I copy and paste, but here it is: var PLAYERS = [ { name: "Person One", score: 32, id: 1 }, { name: "Person Two", score: 28, id: 2 }, { name: "Person Three", score: 3, id: 3, } ] function Header(props) { return( <div className="header"> <h1>{props.title}</h1> </div> ); } Header.propTypes = { title: React.PropTypes.string.isRequired, };

function Counter(props) { return( <div className="counter"> <button className="counter-action decrement"> - </button> <div className="counter-score"> {props.score} </div> <button className="counter-action increment"> + </button> </div> ); } Counter.propTypes = { score: React.PropTypes.number.isRequired };

function Player(props) { return( <div className="player"> <div className="player-name"> {props.name} </div> <div className="player-score"> <Counter score={props.score}/> </div>
</div> ); } Player.propTypes = { name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired }

function Application(props) { return ( <div className="scoreboard"> <Header title={props.title}/> <div className="players"> {props.players.map(function(player) { return <player name={player.name} score={player.score} key={player.id} /> })},
</div> </div> ); }

Application.propTypes = { title: React.PropTypes.string.isRequired, players: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string.isRequired, score: React.PropTypes.number.isRequired, id: React.PropTypes.number.isRequired, })).isRequired, };

Application.defaultProps = { title: "Scoreboard" } ReactDOM.render(<Application players={PLAYERS} />, document.getElementById('container'));

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

To properly format your code, follow the instructions in the Markdown Cheatsheet pop-up found below the text entry area. :arrow_heading_down:

1 Answer

Sergio Lopez
Sergio Lopez
2,892 Points
Sergio Lopez
Sergio Lopez
2,892 Points

Hi Chris

Under the map function you have to return the <Player /> Component with capital P

return <Player name={player.name} score={player.score} key={player.id} />

Chris Tsantiris
Chris Tsantiris
587 Points
Chris Tsantiris
Chris Tsantiris
587 Points

Thanks Sergio. I ended up just rebuilding the whole exercise using Atom instead of the workspace, and it worked. I must have corrected that typo the second time around.