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

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.

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
204,839 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

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

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.