Using Existing Files from React Components Course

// import PlayerList instead of Player
import PlayerList from './PlayerList';

class App extends Component {
  ...

  render() {
    return (
      <div className="scoreboard">
        <Header players={this.state.players} />

        <PlayerList
          players={this.state.players}
          changeScore={this.handleScoreChange}
          removePlayer={this.handleRemovePlayer}
          {/* Guil doesn't have this line, but I left it in the from React Components course */}
          getHighScore={this.getHighScore}
        />

        <AddPlayerForm addPlayer={this.handleAddPlayer} />
      </div>
    );
  }
}

import React from 'react';
import Player from './Player';

const PlayerList = ({players, getHighScore, changeScore, removePlayer}) => {
  return (
    <div>
      {players.map((player, index) =>
        <Player
          index={index}
          key={player.id.toString()}
          id={player.id}
          name={player.name}
          score={player.score}
          changeScore={changeScore}
          removePlayer={removePlayer}
          {/* like in App.js, Guil does not have the high score functionality built in the previous course */}
          isHighScore={getHighScore() === player.score}
        />
      )}
    </div>
  );
};

export default PlayerList;