Frontend Mentor | Andrea Iriarte's profile

Connor• 190

@ayeyaiyai

Submitted 7 months ago

Just want to ensure everything looks good. If I'm making any obvious mistakes please let me know!

Interactive Rating Component (React)

#react

Andrea Iriarte• 130

@andrea-iriarte

Posted 7 months ago

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

Marked as helpful

Andrea Iriarte

All comments

Interactive Rating Component (React)

React-Tailwind-FramerMotion