Interactive Rating Component (React)

Hi Connor!

Great job on this project! Looking at your code, however, I noticed that there were a few instances of unnecessary repeat code. Specifically, when displaying the row of numbers, it would be better to iteratively execute a block of code by mapping through an array. For example:

<div>
   {
         Array(5).map((index) => (
              <button key={index} className={`number-button ${rating === index + 1? "number- 
               button-selected" : ""}`} onClick={() => handleClick(index)}>{index + 1}</button>)
   }
</div>

That's all you need to render the five rating bubbles!

There can only be one parent / outer element within a block like this, and that element must have some sort of key. Ideally the key should be some sort of unique string, but in this case the index from the array works as well.

Also, the variable index is arbitrarily named. I could have called it anything. It is only important to know that it is referring to the element within the array which is currently being targeted as the code iterates through the different items.

You can read more here: Rendering Lists

Great design. You should make it properly responsive.

Also you could add an alert when the submit is clicked without selecting a rating.