Interactive Rating Component

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted almost 3 years ago

  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.

  21

  Marked as helpful