I used functional components and props to pass around all values needed for this exercise. Worked out pretty good 👌🏽

to determine if the "is-high-score" class is to be applied to the CrownLogo svg, I performed a check to see if my high score prop (passed in from parent component) is greater than the score of the rest of the players (values also passed from parent component). Note that the parent class sends back a score via props for each player on the board. each time the score is changed, a check is performed to see who has the highest score. The "highScore" prop references a callBack function that handles that logic.

export default function Player(props) {
    let { removePlayer, id, score, index, changeScore, name, highScore } = props;

    function applyHighScore (number) {
        return (score < number || score === 0) ? false : true;
    }
    const highlight = applyHighScore(highScore) ? "is-high-score" : "";

To get the highest score i just use the reduce method on the players array held in state to check if the current number is greater than the last largest number

  let getHighScore = players.contestants.reduce((previousLargestNumber, currentLargestNumber) => {
    return (currentLargestNumber.score > previousLargestNumber) ? currentLargestNumber.score : previousLargestNumber;
  }, 0);

then just ship out that value as a prop

<Player
  ...
          highScore={getHighScore}
  ...
        />