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.
numberOfStars which will render the number of stars on the page.Click to reveal
You can make use of the idx in the map() method to keep a track of star which is being hovered over. This will help you to fill up the stars up till that point.
Click to reveal
Can you try using events like onMouseEnter() and onMouseLeave() on the SVG star element?