Sign in
Skip to solution
mediumMachine Coding

Build a Star Rating component

639 views
01

Understand the problem

Build a reusable 5-star rating with hover, click and half-star support.

ReactEventsHalf Star
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

A star rating tests four things at once: separating hover preview from the committed value, the half-star geometry, partial-fill rendering, and a clean controlled, accessible component.

The mental model

Keep two numbers: value (committed, set on click) and hover (transient preview). Re

Solution ready — 2 min read

Classified // press E to declassify

04

React solution

Complete solutionRun Playground
import { useState } from 'react';
import StarRating from './src/StarRating';

export default function App() {
  const [rating, setRating] = useState(2.5);
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 32, textAlign: 'center' }}>
      <h2 style={{ marginBottom: 4 }}>Rate your experience</h2>
      <p style={{ color: '#666', marginTop: 0, marginBottom: 16 }}>Hover the left vs right half of a star. Arrow keys work too.</p>
      <StarRating value={rating} precision={0.5} onChange={setRating} />
      <p style={{ marginTop: 18, fontSize: 18 }}>You rated: <strong>{rating}</strong> / 5</p>
      <hr style={{ margin: '24px auto', maxWidth: 240, border: 'none', borderTop: '1px solid #e5e5ea' }} />
      <p style={{ color: '#666', marginBottom: 6 }}>Read-only display (3.5):</p>
      <StarRating value={3.5} readOnly size={24} />
    </div>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 40 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track