Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create a Rating (Star) Component in React — Reusable Controlled and Uncontrolled Star Widget with Form Support and Read-Only Mode

Prompt

Build a reusable star rating component in React that works in two modes: (1) Without form support — fully controlled via value and onChange props, and also supports uncontrolled usage with a defaultValue. Hovering over stars shows a preview rating; clicking locks it. Props: defaultValue, onChange, size (small/medium/large), maxRating (default 5), readOnly. Stars are rendered using the ★ special character scaled by font-size. (2) With form support — renders a hidden input so the rating value is included in native HTML form submissions via a name prop. Must be reusable for multiple star widgets on the same page. This was asked in Airbnb's senior frontend engineer interview.

Create controlled mode with value/onChange props, and uncontrolled mode with defaultValue using useState internally.
Test Results

Create a Rating (Star) Component in React — Reusable Controlled and Uncontrolled Star Widget with Form Support and Read-Only Mode

Build a reusable star rating component in React that works in two modes: (1) Without form support — fully controlled via value and onChange props, and also supports uncontrolled usage with a defaultValue. Hovering over stars shows a preview rating; clicking locks it. Props: defaultValue, onChange, size (small/medium/large), maxRating (default 5), readOnly. Stars are rendered using the ★ special character scaled by font-size. (2) With form support — renders a hidden input so the rating value is included in native HTML form submissions via a name prop. Must be reusable for multiple star widgets on the same page. This was asked in Airbnb's senior frontend engineer interview.