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()

Posted by elisha day
elisha day
5,115 Points

I followed everything in this video and it is saying cannot read property 'map' of undefined

here is my code

const App = (props) => { return ( <div className="scoreboard"> <Header title="Scoreboard" totalPlayers={4} />

  {/* Players list */}
  {props.initialPlayers.map(player =>
    <Player
    name={props.name} 
    score={props.score}
    />
    )}


</div>

); }

ReactDOM.render( <App initialPlayers={ players}/>, document.getElementById('root') );

Hakan Ergoksen
Hakan Ergoksen
2,168 Points
Hakan Ergoksen
Hakan Ergoksen
2,168 Points

You need to add 'player' value in the '<Player />' tag's attribute. Because it is an iteration.

Example:

If it is a javascript code block. It looks like this:

players.forEach( player => console.log(player));
// player is a value

You need to change your <Player /> tag like below:

<Player
       name= { player.name }
       score={ player.score }
   />
// player is a value
Dane Cook
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dane Cook
Front End Web Development Techdegree Graduate 15,464 Points
Dane Cook
.a{fill-rule:evenodd;}techdegree seal-36
Dane Cook
Front End Web Development Techdegree Graduate 15,464 Points

Hello, Try changing props.name to player.name and props.score to player.score so that it will be referencing each object being iterated on.

elisha day
elisha day
5,115 Points

I dont know where to put the player.forEach here is my new code...

const App = (props) => { return ( <div className="scoreboard"> <Header title="Scoreboard" totalPlayers={4} />

  {/* Players list */}
  {this.props.initialPlayers.map(player =>
    <Player
    name={player.name} 
    score={player.score}
    />
    )}


</div>

); }

2 Answers

Hakan Ergoksen
Hakan Ergoksen
2,168 Points
Hakan Ergoksen
Hakan Ergoksen
2,168 Points

This is how your code should look like:

const players = [
    {
        name: "Elisha",
        score: 10
    },
    {
        name: "Hakan",
        score: 20
    },
    {
        name: "Dane",
        score: 30
    },
    {
        name: "James",
        score: 40
    },
];

const Header = (props) => {
  return (
    <header>
      <h1>{ props.title }</h1>
      <span className="stats">Players: { props.totalPlayers }</span>
    </header>
  );
};

const Player = (props) => {
  return (
    <div className="player">
      <span className="player-name">
        {props.name}
      </span>

      <Counter score={props.score} />
    </div>
  );
};

const Counter = (props) => {
  return (
    <div className="counter">
      <button className="counter-action decrement"> - </button>
      <span className="counter-score">{ props.score }</span>
      <button className="counter-action increment"> + </button>
    </div>
  );
};

const App = (props) => {
  return (
    <div className="scoreboard">
      <Header 
        title="Scoreboard" 
        totalPlayers={props.initialPlayers.length}
      />

      {/* Players list */}
        {props.initialPlayers.map( player =>
            <Player
                name= {player.name}
                score={player.score}
            />
        )}

    </div>
  );
};

ReactDOM.render(
  <App initialPlayers={players} />,
  document.getElementById('root')
);
elisha day
elisha day
5,115 Points

I DID TRY THAT AND IM STILL GETTING MAP UNDEFINED ERROR