React Interview Challenge: Create a Star Rating Component

This example challenge is something you could expect if you are applying for frontend engineer positions.

You are tasked with creating a star rating component and given a list of functional requirements. Give this a go on your own and if you get stuck reference my example demo and code. Links at bottom of post. To simulate an actual interview situation, set yourself a timer for 45 minutes and practice explaining your thought process out loud as you go.

You are free to use any star icons you want or you can copy and paste these ascii star characters to use in your component:
Filled Star: ★
Unfilled Star: ☆

Instructions:

• Create a star rating component.
• onClick, stars should fill up to the star clicked.
• Stars should change from unfilled to filled onHover and set to unfilled on mouse leave. Star rating should remain as it was when no stars are being hovered.
• The star rating should reset if the current star rating is filled and is clicked.
• The component should allow a default initial star rating and total number of stars to be set.
• Extra Credit:
  • Add a section to show the current star rating percentage to two decimal places.
  • Add an input to control the total number of stars.
  • Add an input to control the star rating.

Live Demo
Code