React JS Star Rating Application

Rating App Reference Image
Rating App Reference Image

Below code reference, will update the color of star based on user click. Use “onClick” handler to extend further, if requires.

import React, {useState} from "react";
import {BsFillStarFill} from "react-icons/bs";

export const StarRating = ({totalNo = 5}) => {
    const generateArray = (arrayList) => [...Array(arrayList).keys()];
    const [selectedItem, setSelectedItem] = useState(0);
    return(
        <div>
            {
                generateArray(totalNo).map((_, index) => (
                    <BsFillStarFill color={selectedItem > index ? "tomato" : "white" } onClick={() => setSelectedItem(index + 1)} key={index}/>
                ))
            }
            <p>{selectedItem} of {totalNo} stars</p>
        </div>
    )
}

Demo Link