All comments

• 

  Connor•190

  @ayeyaiyaiSubmitted about 1 year ago

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

  

  Interactive Rating Component (React)

  2

  50
  

  Andrea Iriarte•130

  @andrea-iriartePosted about 1 year 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

  1
• 

  Javier Hernandez Gonzalez•30

  @ArguishSubmitted over 1 year ago

  

  React-Tailwind-FramerMotion

  1

  60
  

  Andrea Iriarte•130

  @andrea-iriartePosted over 1 year ago

  Hey,

  Really like the idea of compiling all of your compiled components together, with an index to toggle between them. May prove useful for a sort of portfolio project.

  0