Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics (retired) Designing Data Flow Restructuring State

Boby Vilayvong
Boby Vilayvong
13,039 Points

Uncaught TypeError: Cannot read property 'map' of undefined after following the video all the way to the end.

Uncaught TypeError: Cannot read property 'map' of undefined after following the video all the way to the end. How to get rid of this error in the console?

2 Answers

danielperez
seal-mask
.a{fill-rule:evenodd;}techdegree
danielperez
Full Stack JavaScript Techdegree Student 15,993 Points

So I figured out why my code does nt work

I spelled getIntialState instead of getInitialState

after the getInitialState works

State for this.state.players then is rendered in the react app properly

danielperez
seal-mask
.a{fill-rule:evenodd;}techdegree
danielperez
Full Stack JavaScript Techdegree Student 15,993 Points

I got to this part of the React Basics course.

I indeed do get an error the error 'Uncaught TypeError: cannot read property map of undefined'

When I do change this.props.players to this.state.players in the render method, I get a new error 'Uncaught TypeError: Cannot read property 'players' of null'

When I set breakpoint on line 89 of app.jsx, just before the player div is rendered

I can go to the javascript console and type this to see what data is there ...

I notice that the instance of this does indeed have the player.name, score and id

I copied the output from the console below,

note that the state: null

this
Constructor {getIntialState: ƒ, props: {…}, context: {…}, refs: {…}, updater: {…}, …}
context: {}
getIntialState: ƒ ()
props:
initialPlayers: Array(3)
0: {name: "Jim Hoskins", score: 31, id: 1}
1: {name: "Andrew Chalkley", score: 35, id: 2}
2: {name: "Alena Holligan", score: 42, id: 3}
length: 3
__proto__: Array(0)
title: "Scoreboard"
key: (...)
ref: (...)
get key: ƒ ()
get ref: ƒ ()
__proto__: Object
refs: {}
**state: null**
updater: {isMounted: ƒ, enqueueCallback: ƒ, enqueueCallbackInternal: ƒ, enqueueForceUpdate: ƒ, enqueueReplaceState: ƒ, …}
_reactInternalInstance: ReactCompositeComponentWrapper {_currentElement: {…}, _rootNodeID: null, _instance: Constructor, _nativeParent: null, _nativeContainerInfo: {…}, …}
__proto__: ReactClassComponent

Below is the code right from the project files....

The ReactJS documentation on 'reacts with out es6 shows that the code below should work

var PLAYERS = [
  {
    name: "Jim Hoskins",
    score: 31,
    id: 1,
  },
  {
    name: "Andrew Chalkley",
    score: 35,
    id: 2,
  },
  {
    name: "Alena Holligan",
    score: 42,
    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,
};

var Application = React.createClass({

  propTypes: {
    title: React.PropTypes.string,
    initialPlayers: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      score: React.PropTypes.number.isRequired,
      id: React.PropTypes.number.isRequired,
    })).isRequired,
  },

  getDefaultProps: function(){
    return {
      title: "Scoreboard",
    };
  },

  getIntialState: function(){
    return {players: this.props.initialPlayers};
  },

  render: function(){
      return (
        <div className="scoreboard">
          <Header title={this.props.title} />

          <div className="players">
            {this.state.players.map(function(player) {
              return <Player name={player.name} score={player.score} key={player.id} />
            })}
           </div>
        </div>
     );
  },
});

ReactDOM.render(<Application initialPlayers={PLAYERS}/>, document.getElementById('container'));

I looked all over the net and could nt find an answer for why this is not working ... I hope I am just missing something simple