Interactive Rating Component Using Next JS & Tailwind CSS

Community feedback

• 

  Afolarin Oyeleke•130

  @Fola-rinPosted about 2 years ago

  Hello there, great work on the design. If what you mean is changing the background-color of the button with an onClick event, you can easily do so by adding a condition as you map through the data array. So you can have a new prop called active and this will toggle the background color. {data.map((val: any) => ( <ButtonCirle key={val.id} text={val.text as string} handleCLick={() => handleRating(val.id)} active={val.id === rating} /> ))}

  Hope that solves your problem? If it did, please let me know and kindly mark this reply as helpful> Well done and happy coding!

  0