Uncaught TypeError: Cannot read property 'players' of undefined

Question

Hi, I am doing the React Basics Course and I have problem running the code of the final video https://teamtreehouse.com/library/remove-items-from-state

I get the following error in my browser console when clicking the delete button which is displayed on the left side of the player when you hover on the player name:

app.js:80 Uncaught TypeError: Cannot read property 'players' of undefined

The link of my workspace is here : https://teamtreehouse.com/workspaces/40592406

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">
        <button className="remove-player" onClick={ () => props.removePlayer(props.id) }>✖</button>
        { props.name }
      </span>
      <Counter />
    </div>
  );
}

class Counter extends React.Component {
  state = {
    score: 0
  };

  incrementScore = () => {
    this.setState( prevState => {
      return {
         score: prevState.score + 1
      };
    });
  }

  decrementScore = () => {
    this.setState( prevState => {
      return {
        score: prevState.score - 1
      };
    });
  }

  render() {
    return(
      <div className="counter">
        <button className="counter-action decrement" onClick={this.decrementScore}> - </button>
        <span className="counter-score">{this.state.score}</span>
        <button className="counter-action increment" onClick={this.incrementScore}> + </button>
      </div>
    );
  }
}

class App extends React.Component {

  state = {
    players: [
      {
        name: "Krishna",
        id: 1
      },
      {
        name: "Ritesh",
        id: 2
      },
      {
        name: "Pramesh",
        id: 3
      },
      {
        name: "Bidur",
        id: 4
      },
    ]
  };

  handleRemovePlayer = (id) => {
    this.setState( prevState => {
      return {
        players: this.prevState.players.filter( p => p.id !== id )
      }; 
    });
  }

  render() {
      return(
        <div className="scoreboard">
          <Header 
            title="My Scoreboard"
            totalPlayers={this.state.players.length}/>

          {/* Players List */}
          {this.state.players.map( player =>
            <Player
              name={player.name}
              id={player.id}
              key={player.id.toString()}
              removePlayer={this.handleRemovePlayer}
            />
          )}
        </div>
      );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Thanks in advance for the replies! :)

Answer 1 · 2018-12-01T17:02:29Z

December 1, 2018 5:02pm

On line 80 we have the following:

players: this.prevState.players.filter( p => p.id !== id )

The problem here is the prevState doesn't belong to this. There's no this.prevState, prevState is just a parameter in this callback function. Try this instead:

handleRemovePlayer = (id) => {
    this.setState( prevState => {
      return {
        // just `prevState` instead of `this.prevState`
        players: prevState.players.filter( p => p.id !== id ) 
      }; 
    });
  }

Welcome to the Treehouse Community

Looking to learn something new?

Krishna Prasad Sangroula

Krishna Prasad Sangroula

Uncaught TypeError: Cannot read property 'players' of undefined

1 Answer

Brendan Whiting

Brendan Whiting