interactive-rating-component

Hi, there 👋 Nice solution!

Here are some thing you can improve:

Accessibility:

• Ensure all elements have good contranst ratio. It's hard to read text when hovering on rating selection buttons.
• Rating selection button are not accessible with keyboard only. That's because you use <div> elements which don't have tab index by default. It's more appropriate to use radio buttons here.

React:

• It's more "reactive" way to control your UI with state, but not with side-effect functions. Instead of touching classNames directly in handler you can use state to update UI. For example:

const App = () => {
 const [isOpen, setIsOpen] = useState(false);

 const submitClickHandler = () => setIsOpen(true);

 return (
   <Wrapper>
     <Button onClick={submitClickHandler}>;
     <HiddenComponent className={isOpen ? "" : "hidden"} />
   </Wrapper>
 );
}