Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Well done!

You have completed React Components!

Sign up for Treehouse Back to Library

The React Challenge

3:21 with Laura Coronel

This challenge will give you a great opportunity to practice what you've learned so far about React.

SVG crown icon

<svg viewBox="0 0 44 35">
  <path d="M26.7616 10.6207L21.8192 0L16.9973 10.5603C15.3699 14.1207 10.9096 15.2672 7.77534 12.9741L0 7.24138L6.56986 28.8448H37.0685L43.5781 7.72414L35.7425 13.0948C32.6685 15.2672 28.3288 14.0603 26.7616 10.6207Z" transform="translate(0 0.301727)"/>
  <rect width="30.4986" height="3.07759" transform="translate(6.56987 31.5603)"/>
</svg>

Challenge instructions

  • When the app loads and all player scores are 0 all icons should be light grey.
  • The change should happen only when a player takes the highest score, or when they are tied for the highest score.
  • If the player with the highest score is removed from the scoreboard, then the player (or players) with the next highest score gets the gold crown.
  • All the information you need to determine the highest score is in the players state.
  • You'll need to figure out how to get and update the highest score with each score change, then pass that information to a player, and eventually the SVG.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    I have a special challenge for you. 0:00
    This challenge is gonna give you a great opportunity to practice some of 0:00
    what you've learned so far about React. 0:04
    Let's go over what you're gonna build. 0:07
    You're gonna make the scoreboard app a little more interactive and 0:09
    competitive by building a highest score feature. 0:13
    You'll add a crown icon next to the player name inside the player component. 0:18
    When a player on the scoreboard has the highest score, 0:23
    the icon changes from a light gray to gold and displays a short scaling animation. 0:27

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up