React Coding Interview Challenge 12

Write an interactive star-based rating component

Back by popular demand! This is the 12th article in what was supposed to be a series of just 10 React coding interview-style problems, each complete with the problem specification and a summary of one approach to the solution. I am not sure how long I will continue this series, but as long as I keep thinking of or encountering new interview problems, I will do my best to post them here!

Environment

Use the environment you are most comfortable with. I recommend using create-react-app to create a local version of the project so that you can inspect the DOM easily from your browser when debugging. Alternatively, you can work from a blank React template in CodeSandbox. Starter code is provided after the problem specification.

Specification

Write a functional component that allows a user to enter ratings on the five-star system. The component should initially display five empty stars in a row. When the user hovers over a star, that star as well as all the stars that come before it in the row should become filled (both the empty star and filled star image URLs are provided in the started code below). When the user stops hovering over the star, the component should return to its starting…