Interactive Rating Component Using Next JS & Tailwind CSS
Design comparison
Solution retrospective
How can I modify the circular button's clicking background? I divided the buttons into various components and mapped the buttons in the parent component using a map function.
Community feedback
- @Fola-rinPosted over 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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord