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 (2018) Introducing Props Iterating and Rendering with map()

Brett Gamble
Brett Gamble
407 Points
Posted by Brett Gamble
Brett Gamble
407 Points

Players 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!

Brett Gamble
Brett Gamble
407 Points
Brett Gamble
Brett Gamble
407 Points

After some playing around, and very little understanding of why the lesson code does not work, I managed to get this working with the following:

const App = () => {
  return (
    <div className="scoreboard">
      <Header
        title="Scoreboard"
        totalPlayers={players.length}
      />
      {/* Players list */}
        {players.map( player =>
            <Player
                name = { player.name }
                score = { player.score }
            />
        )}
    </div>
  );
}

Note that the 'props' property of const App = (props) has been removed and the initialPlayers reference in the map statement has also been removed.

4 Answers

Dom Ss
Dom Ss
4,339 Points
Dom Ss
Dom Ss
4,339 Points

Hey 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
marcell gibbs
3,744 Points
marcell gibbs
marcell gibbs
3,744 Points

Im 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
Milz Dechnik
7,813 Points
Milz Dechnik
Milz Dechnik
7,813 Points

I 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
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

This 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
David Turner
1,061 Points
David Turner
David Turner
1,061 Points

This 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.