How is score preserved after a player is removed?

Component state is unaffected by application state. The application state is just an array of players while each component state contains the player name, id, key and a function.

I hope this makes sense. The previous lecture explains about this.

https://teamtreehouse.com/library/creating-the-application-state

It's my understanding that render( ) executes when App is first created and after its state changes, which happens when a player is deleted (removed from state.players array). The score is not in App's state, but in Counter's state which is a component in Player. When render( ) executes the state.players.map( ) statement it appears that Player + Counter components and their states are reused rather than recreated.

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      players: [
        { name: "Guil", id: 1 },
        { name: "Treasure", id: 2 },  ...
      ]}
  }

  handleRemovePlayer = (id) => { ... }

  render() {
    return (
      <div className="scoreboard">
         ...
        {/* players list */}
        { this.state.players.map( (player) => {
            return (
              <Player
                name={player.name}
                id={player.id}
                key={player.id.toString()}
                removePlayer={this.handleRemovePlayer}
              />
          )})}
      </div>
    )}}

It smells like magic to me, but perhaps someone has a better explanation.