Interactive rating component - React + TS + TailwindCSS

Community feedback

• 

  Gin•20

  @callmeginPosted about 1 year ago

  According to your github, you're aspiring to be come a dev. So I have one recommendation for ya:

  Code readability is key ! While everything works, but at least for me readability could be improved. And believe it or not, but writing a complex code might not impress anyone and even have an opposite effect during your code reviews :)

  You've got a bunch of states, which are maybe not really necessary and that comes down to you choosing to generate buttons from an array. Which forces you to create another state to track your button clicks and so on.

  What could improve that, in my eyes, is creating array of objects, from which you could easily generate buttons and keep track of their changes at the same time. Something like this:

  const [buttonData, setButtonData] = useState(
  {id: 1, selected: false},
  {id: 2, selected: false},
  {id: 3, selected: false},
  {id: 4, selected: false},
  {id: 5, selected: false}
  )
  

  Having that, you can generate your buttons:

  buttonData.map(button => <Button key={button.id} rating={button.rating} isClicked={selected} onClick={() => ...} />
  

  This way you'd get rid of some of your states, and simplify your handleButtonClick function.

  On top of that, isRated is not really necessary, since you're already keeping track of current rating, hence you can just simply check if rating is not 0 and that's it.

  That's my 2 cents :)

  0