Star Rating Component

This example demonstrates a star rating system.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function StarRating() {
  const [rating, setRating] = useState(0);

  return (
    <div>
      <h1>Star Rating</h1>
      {[1, 2, 3, 4, 5].map((star) => (
        <span
          key={star}
          onClick={() => setRating(star)}
          style={{ cursor: 'pointer', color: star <= rating ? 'gold' : 'gray' }}
        >
          ★
        </span>
      ))}
      <p>Your rating: {rating}</p>
    </div>
  );
}

ReactDOM.render(<StarRating />, document.getElementById('root'));