Hey there. The problem you have described is likely because you have defined your Button
component inside the body of the Rating
component. This is invalid React code, because the component definition will get re-created every time Rating
re-renders, causing all sorts of unexpected behavior.
The quick fix is to move the definition of Button
to the top level of the file.
However, for full accessibility, this should be a <form>
with <input type="radio">
inside it. Doing it that way will allow the browser to properly communicate that this is a form, and it has something inside it that you can only select one of. You can also get rid of the useState
because the form will manage its own uncontrolled state.
Marked as helpful
@tengxuanp
Posted
@AlexKMarshall Thank you so much for this, it's really helpful :)