Star Rating

A star rating is a row of buttons and one number in state: the rating, from 0 to 5. Everything on the screen comes from it: the stars up to the rating are filled (★), the rest are empty (☆), and a line says 3 of 5. Clicking a star sets the rating. Clicking the star that already is the rating clears it back to 0, so a visitor can take a rating back.

The stars are pictures, and a screen reader needs words. Each button has an aria-label like "Rate 3 stars", and aria-pressed says which one is the chosen button: the one equal to the rating.

The same ideas on another component, a like button:

const [liked, setLiked] = useState(false);
<button aria-label="Like" aria-pressed={liked} onClick={() => setLiked(!liked)}>
  {liked ? "♥" : "♡"}
</button>

The check opens the page, clicks some stars, then looks at what the buttons show. Your page must show:

> open the page
    button: Rate 1 star … button: Rate 5 stars
    text: 0 of 5
> click "Rate 3 stars"   →  button: Rate 3 stars (pressed), text: 3 of 5
> click "Rate 3 stars"   →  button: Rate 3 stars, text: 0 of 5
> click "Rate 4 stars"   →  button: Rate 4 stars (pressed), text: 4 of 5
> look at the stars
  ★ ★ ★ ★ ☆

Your task: the five star buttons with their aria-label are already in src/App.jsx. Add the rating state, the of 5 line, a rate function that sets or clears the rating, a click on each star, the ★ or ☆ inside each button, and aria-pressed.

Assignment
Follow the Coding Tutorial to build a five-star rating that a click sets, a second click clears, and a screen reader can follow.

Hint
In rate, compare value with rating: the same number means back to 0. A star is filled when its number is at most the rating, and pressed only when it equals the rating.