class App extends React.Component {
    state = {
      players: [
        {name: 'LDK', score: 0, id: 1},
        {name: 'HONG', score: 0, id: 2},
        {name: 'KIM', score: 0, id: 3},
        {name: 'PARK', score: 0, id: 4},
      ]
    };
  
    handleRemovePlayer = (id) => {
      this.setState(prevState => {
        return {
          players: prevState.players.filter(item => item.id !== id)
        }
      })
    }
  
    render() {
      return (
        <div className="container p-3">
          <Header title="My scoreboard" totalPlayers={this.state.players.length} />
  
          {/*Players List*/}
          { this.state.players.map(item =>
            <Player key={item.id}
                    name={item.name} score={item.score}
                    removePlayer={this.handleRemovePlayer} id={item.id} />) }
        </div>
      );
    }
  }