Facebook Pixel

Star Rating

React.js
medium
30 mins

You need to implement a star rating component where users can select a rating by clicking on stars. The rating should update dynamically, and there should be a reset button to clear the rating.

Requirements

  • The component should display five stars ★★★★★.
  • Clicking on a star should update the rating and highlight the selected stars.
  • The highlighted stars should be yellow (#FFD700), and unselected stars should be gray (#CCCCCC).
  • There should be a reset button below the stars that resets the rating to 0. The button should be labelled "Reset Rating".
  • Display the current rating below the stars with the text : "Current Rating: X", where X is the selected star rating.
  • The default rating should be 0 (no stars selected).

Reference UI

starRating

Preview what you need to build

Companies:

amazon
ola
flipkart
airbnb

Solve Similar questions 🔥

Please Login.
Please Login.