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 trialBrett Gamble
407 PointsPlayers array not appearing
Early in the video, an array of players is created and then used as a prop within the App Rendering.
ReactDOM.render( <App initialPlayers={players} />, document.getElementById('root') );
Guil, then shows how the array shows up as a prop.
I am using the solution code and am not seeing the array contents appearing as properties in the console, as well as receiving a ReactJS: TypeError: Cannot read property 'map' of undefined error.
Any help would be appreciated!
4 Answers
Dom Ss
4,339 PointsHey Brett,
I was also having difficulty with it. It would be useful if Guil did not go for explicit return. Was not able to make the array appear without the explicit.
But from your code, I can see that players array is not really accessible in the const App as there are no props passed into it as an argument.
Once you pass const App = (props) => {
}
you can then call the map on props.players.map( "the rest from your code should work")
Also make sure, that you are passing props down to Player and Counter components.
marcell gibbs
3,744 PointsIm also having the same issue and thee code posted above is not working for me either. I cant seem to figure this one out
Milz Dechnik
7,813 PointsI was getting the "cannot read property 'map' of undefined" error.
Changing the code to Brett's version above, and then changing everything bit by bit back to how it was done in the lesson worked for me. Spent quite a while stuck on this. Here what my code looks like in the end:
const App = (props) => {
return (
<div className="scoreboard">
<Header
title="Scoreboard"
totalPlayers={players.length}
/>
{/* Players list */}
{props.initialPlayers.map( player =>
<Player
name = { player.name }
score = { player.score }
/>
)}
</div>
);
}
ReactDOM.render(
<App initialPlayers={players}/>,
document.getElementById('root')
);
Steven Ventimiglia
27,371 PointsThis issue is often caused by the following line in const Header
:
<span className="stats">Players: { props.totalPlayers(1) }</span>
...which needs to be changed so it's no longer mistaken as a function:
<span className="stats">Players: { props.totalPlayers }</span>
David Turner
1,061 PointsThis was a syntactical issue for me.
//This code doesn't work//
{props.initialPlayers.map ( (player) => {
<Player playerName={player.name} score={player.score} />
})}
//This code does work//
{props.initialPlayers.map( (player) =>
<Player playerName={player.name} score={player.score} />
)}
//This also works//
{props.initialPlayers.map( (player) => {
return(<Player playerName={player.name} score={player.score} />)
})}
Gotta love JS sometimes.
Brett Gamble
407 PointsBrett Gamble
407 PointsAfter some playing around, and very little understanding of why the lesson code does not work, I managed to get this working with the following:
Note that the 'props' property of const App = (props) has been removed and the initialPlayers reference in the map statement has also been removed.