07-usepopcorn/src/StarRating.js | alternative for star rating

CSS

.disable-star {
  filter: grayscale(1);
}

import './star-rating.css';
import { useState } from 'react';

export default function StarRating() {
  const [cursor, setCursor] = useState(0);
  const [rating, setRating] = useState(0);

  function Star({ i }) {
    return (
      <div
        onClick={() => {
          setRating(i + 1);
        }}
        onMouseOver={() => setCursor(i + 1)}
        onMouseLeave={() => setCursor(rating)}
        className={`rating-star ${cursor < i + 1 && 'disable-star'}`}
      >
        ⭐
      </div>
    );
  }

  return (
    <div className="rating-stars-container">
      {Array(5)
        .fill(5)
        .map((e, i) => (
          <Star i={i} key={e + i} />
        ))}
    </div>
  );
}

devYuraKim / react

07-usepopcorn/src/StarRating.js | alternative for star rating #2