Star Rating

쉬움

별점 입력 컴포넌트 (1-5점)

#click#javascript#rating

라이브 데모

Select a rating

코드

StarRating.tsx

const [rating, setRating] = useState(0);
const [hover, setHover] = useState(0);
return (
  <div>
    {[1, 2, 3, 4, 5].map(star => (
      <button className={`star ${star <= (hover || rating) ? 'filled' : ''}`}
        onClick={() => setRating(star)}
        onMouseEnter={() => setHover(star)} />
    ))}
  </div>
);