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?