cannot remove player

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

{/* instead of passing props.removePlayer() directly to the onClick event, you want to
pass in an anonymous function;
if you pass it directly, it will invoke once the page refreshes and all the players will
be deleted.
using anonymous function ensures that it invokes only when the event is triggered*/}
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 => ({
         score: prevState.score + 1
      }));
   }

   decrementScore = () => {
      this.setState( prevState => ({
         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: "Guil",
        id: 1
      },
      {
        name: "Treasure",
        id: 2
      },
      {
        name: "Ashley",
        id: 3
      },
      {
        name: "James",
        id: 4
      }
    ]
  }

  handleRemovePlayer = id => {
    this.setState(prevState => {
      return {
        player: prevState.players.filter(p => p.id !== id)
      }
    })
    console.log('player successfully removed')
  }
   render() {
      return (
         <div className="scoreboard">
            <Header
               title="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}
                /* giving the player a method from the parent function means that
                * player is now able to send data back to its parent App component
                * through the callback function that's being passed to it through props*/
            />
          )}
         </div>
      )
  }
}



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