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

marcell gibbs
marcell gibbs
3,744 Points
Posted by marcell gibbs
marcell gibbs
3,744 Points

I can't seem to get past this error, IS THIS COURSE UP TO DATE? : TypeError: Cannot read property 'map' of undefined

I followed the video and when i checked to see the props for the App component is showed none. Which later gives me this error when I got to map over the array:

TypeError: Cannot read property 'map' of undefined.

here's my entire code :

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const players = [
{
    name: "Marcell",
    score: 30
  },
  {
    name: "Trina",
    score: 29
  },
  {
    name: "Darius",
    score: 6
  },
  {
    name: "Deja",
    score: 1
  }
];

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.playerName}
        </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={5} 
    />

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

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

export default App ```

5 Answers

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

I ran this and it works as expected.

import React from "react";
import ReactDOM from "react-dom";

const players = [
  {
    name: "Marcell",
    score: 30,
  },
  {
    name: "Trina",
    score: 29,
  },
  {
    name: "Darius",
    score: 6,
  },
  {
    name: "Deja",
    score: 1,
  },
];

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={5} />

      {/* Players List */}
      {props.initialPlayers &&
        props.initialPlayers.map((player, i) => (
          <Player name={player.name} score={player.score} key={i} />
        ))}
    </div>
  );
};

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

This was your code just changed the conditional render and {props.name}..

I put this in index.js in create-react-app.

marcell gibbs
marcell gibbs
3,744 Points
marcell gibbs
marcell gibbs
3,744 Points

i cannot thank you enough! its so frustrating to try to learn something and it doesn't work as expected. Now, should I be able to continue the tutorial from here? can you explain you put it in index.js instead of App.js like it was? Also if I get stuck again can I ask you directly?

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

Try using conditional rendering.

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

The && is basically used to say if there are initalPlayers do this...

More info on conditional rendering ----> https://reactjs.org/docs/conditional-rendering.html

marcell gibbs
marcell gibbs
3,744 Points
marcell gibbs
marcell gibbs
3,744 Points

Hey thanks for the response but now I'm getting that initialPlayers is not defined

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

That might be my fault. I forgot to add props to the second initialPlayers.map portion of that line. I fixed it see if that works.

marcell gibbs
marcell gibbs
3,744 Points
marcell gibbs
marcell gibbs
3,744 Points

we're getting some where! I now have no errors but I don't have a list of players

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

Sorry I didn't get back sooner.

Change this {props.playerName} to {props.name}

marcell gibbs
marcell gibbs
3,744 Points
marcell gibbs
marcell gibbs
3,744 Points

this is what im getting now:

TypeError: Cannot read property 'map' of undefined App C:/Users/pullU/treeboard/src/App.js:58 55 | const App = (props) => { 56 | return ( 57 | <div className="scoreboard">

58 | <Header 59 | title="Scoreboard" 60 | totalPlayers={5} 61 | />

Blake Larson
Blake Larson
13,014 Points
Blake Larson
Blake Larson
13,014 Points

I just put it in index.js because it was simple to have reactDOM.render and all the components in the same file to avoid any import/export issues. Now that it works you can move components to different files to make it modular. With only a couple of components like this its easier to solve the problem. I hear you, it's frustrating when you can't proceed with a lesson because of errors you can't fix, and I usual look at the community page once or twice a day so I can help in the future.