Interactive Rating Component - React & Tailwind

What are you most proud of, and what would you do differently next time?

I'm most proud of how I dynamically created the rating buttons.

 {[...Array(5).keys()].map((_, index) => {
            const value = index + 1;
            const isSelected = rating === value;
            return (
               handleRating(value)}
              >
                
                
                  {value}
                
              

What challenges did you encounter, and how did you overcome them?

I had challenges with the semi-transparent rating circles. My solution was to use absolute positioning which I wasn't too familiar with. I also used this approach for the top star image.

Another challenge was changing the rating circle's background to white after a selection. I added a new react state to assist with this. I'm not sure if it was entirely necessary. There's probably a more efficient solution.

What specific areas of your project would you like help with?

Am I using React state correctly in this example?

function App() {
  const [rating, setRating] = useState(null);
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (rating !== null) {
      setSubmitted(true);
    }
  };

function Rating({ setRating, handleSubmit, rating }) {
  const handleRating = (value) => {
    setRating(value);
  };