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.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.