How to use CSS and React to create a star rating
As part of a personal project, I was working on a page where the user could add new posts about beers they tried. And in the form for the new post, I added the option to rate the beer via star rating.
The stars are initially all gray. When the user clicks on a star the rating for the beer is set. You can customize the color of unselected or selected stars.
React JSX For Star Icons
The form component contained the star rating section, which had a p element with text Rating and the 5 Font Awesome filled star icons.
SCSS Module To Style Stars
I imported all styles from the scss module as an object in the new.js file. The container class for the stars was rating .
import styles from './new.module.scss';Before introducing any functionality, I set the initial color of the stars to gray. I also used sass to set the colors of the hovered star and any stars to the left as yellow.
If you look at new.js you will see that there is an inner div to contain the five stars. Upon hovering on this div, I set the colors of all the stars as yellow. The stars are referred to as SVG in the scss file since they are SVG HTML elements under the hood.
I then had to essentially deselect all the stars to the right of the hovered star. This is because if the user was hovering on the third star, it indicated that they wanted to set the rating as 3/5, with the two stars to the left coming into the equation.
Thus I used the CSS selector ~ to set the color of any subsequent stars as gray, when any given star was hovered on by the user.
React state and functions to handle user clicking stars
I created a state array variable to keep track of whether each star has been clicked on or not.
const [clicked, setClicked] = useState([false, false, false, false, false]);The first star is of index 0, the second is of index 1, etc.
Whenever a user clicked a star, the elements in clicked up to and including the index of the clicked star, would be set as true.
The React elements corresponding to the stars would listen to the clicked state to determine which CSS class to adopt.
The react code with the state, star click handler, and the star elements was as follows:
Upon the user clicking on a star, handleStarClick would be invoked to set true for elements in the clicked state variable up to and including the index of the clicked star. Then clicked[i] would be true for those i indices and the react star elements would have className={styles.clickedstar} .
.clickedstar {
color: rgb(212, 180, 0);
}If the star was not clicked, no special class was applied, and it took on the default grey color indicating it has not been clicked by a user.
This was all I had to code to make my simple star rating work. Thank you for reading and please let me know if there are ways I can improve my code.
