Star Rating

Easy
Free
#Component Composition

Build an interactive 5-star rating widget. Render five star buttons; clicking a star sets the rating to that value, and all stars up to (and including) the selected one appear filled (★) while the rest appear empty (☆). Hovering a star previews that rating without committing it, and moving the mouse away restores the committed rating. This is a classic interview warm-up that exercises rendering a list, handling click and hover events, and driving the UI from state.

Requirements

  • Render five star buttons with data-testid="star-1" through data-testid="star-5".
  • Each star shows a filled star when its value is less than or equal to the active rating, otherwise an empty star .
  • Clicking a star sets the rating to that value. Show the current rating in data-testid="rating-label" as Rating: N / 5.
  • Hovering a star previews its value (fills stars up to it) without changing the committed rating; onMouseLeave restores the committed rating.

Concepts you'll practice