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

Question

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?

Answer 1 · 2018-09-06T23:00:33Z

September 6, 2018 11:00pm

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

Answer 2 · 2018-09-06T02:32:41Z

September 6, 2018 2:32am

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

Welcome to the Treehouse Community

Looking to learn something new?

Boby Vilayvong

Boby Vilayvong

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

2 Answers

danielperez

danielperez

danielperez

danielperez