snippetjavascriptTip

Star rating component

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

ratingstarcomponentreact

Problem

Star rating components are the de facto way of rating items on the web. They are simple to use and provide a visual representation of the rating. Yet, implementing them sounds tricky. However, with React, you can create a star rating component with ease.
First, you'll need to separate the individual star component from the parent component. The Star component will render each individual star with the appropriate appearance based on the parent component's state.
The StarRating component, in turn, will use the useState() hook to define the rating and selection state variables with the appropriate initial values. Then, you can define a method, hoverOver, that updates selected according to the provided event, using the .data-star-id attribute of the event's target or resets it to 0 if called with a null argument.
Finally, using Array.from() to create an array of 5 elements and Array.prototype.map(), you can create individual <Star> components and handle the onMouseOver and onMouseLeave events of the wrapping element using hoverOver. Handle the onClick event using setRating.

Solution

.star {
  color: #ff9933;
  cursor: pointer;
}

The StarRating component, in turn, will use the useState() hook to define the rating and selection state variables with the appropriate initial values. Then, you can define a method, hoverOver, that updates selected according to the provided event, using the .data-star-id attribute of the event's target or resets it to 0 if called with a null argument.
Finally, using Array.from() to create an array of 5 elements and Array.prototype.map(), you can create individual <Star> components and handle the onMouseOver and onMouseLeave events of the wrapping element using hoverOver. Handle the onClick event using setRating.

Code Snippets

.star {
  color: #ff9933;
  cursor: pointer;
}

const Star = ({ marked, starId }) => {
  return (
    <span data-star-id={starId} className="star" role="button">
      {marked ? '\u2605' : '\u2606'}
    </span>
  );
};

const StarRating = ({ value }) => {
  const [rating, setRating] = React.useState(parseInt(value) || 0);
  const [selection, setSelection] = React.useState(0);

  const hoverOver = event => {
    let val = 0;
    if (event && event.target && event.target.getAttribute('data-star-id'))
      val = event.target.getAttribute('data-star-id');
    setSelection(val);
  };
  return (
    <div
      onMouseOut={() => hoverOver(null)}
      onClick={e => setRating(e.target.getAttribute('data-star-id') || rating)}
      onMouseOver={hoverOver}
    >
      {Array.from({ length: 5 }, (v, i) => (
        <Star
          starId={i + 1}
          key={`star_${i + 1}`}
          marked={selection ? selection >= i + 1 : rating >= i + 1}
        />
      ))}
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <StarRating value={2} />
);

Context

From 30-seconds-of-code: star-rating

Revisions (0)

No revisions yet.