Feedback Stars

Feedback Stars

Create a feedback rating component that takes in a number of stars and outputs the corresponding star SVGs on the output window. When the user clicks on any of the stars, that stars till that point are highlighted (filled). Once the user hovers over the stars, the stars till that point are highlighted - but not persisted until the user clicks on the star.

User Stories

1. Feedback component takes in a prop numberOfStars which will render the number of stars on the page.
2. On hover, the background color of the star should turn to yellow.
3. On clicking a single star, save the feedback in state
4. Ratings should be in the range of 1 <= ratings <= numberOfStars. (It cannot be zero)
5. Once the star is hovered over, all the stars starting from 1 to the star being hovered over should be highlighted (irrespective of the persisted state of stars).