Star Rating Component
Build a reusable 5-star rating widget. Hovering over stars should preview the rating; clicking should lock it in.
Requirements
- Display 5 stars in a row
- Hovering over a star highlights it and all stars before it
- Clicking a star sets the permanent rating
- If you hover away, the display reverts to the permanent rating
- Show a text label below: Poor / Fair / Good / Very Good / Excellent
- Allow resetting the rating to 0 (no selection)
Key Patterns
onMouseEnter / onMouseLeaveonClickArray.from({ length: 5 })
Important
Interview Tip
Use two state values: `rating` (permanent) and `hoverRating` (preview). To decide whether star #i should be filled: use `(hoverRating || rating) >= i`. onMouseLeave on the container resets hoverRating to 0.
Rate this product
☆☆☆☆☆
0/5Not rated
Rate this course (pre-seeded: 3)
★★★☆☆
3/5Good