Frontend Mentor | Interactive Rating Component coding challenge solution

Solution retrospective

Hello Seniors

So I used React Js in solving this challenge and although it works perfectly, I can't seem to get how to change the background color of the current rating value when it is clicked on.

Click here to check out the code.

The code for the rating section looks like below

const Rating = ({ handleClick, rate}) => {
return (
<div className="rating-state">
<div className="icon">
<img src={starIcon} alt="#" className='starIcon'/>
</div>
<h1 className="header">
How did we do?
</h1>
<p className="description">
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div className="rating">
<button
className="rate"
id='1'
onClick={handleClick}
onMouseOver={handleHover}
>1</button>
<button
className="rate"
id='2'
onClick={handleClick}
onMouseOver={handleHover}
>2</button>

Community feedback

DrZero1234• 210

@DrZero1234

Posted over 1 year ago

Hey!

I Created a pull request in your GitHub repo which fixed your issue above. I am not a React guru by any means and I only code as a hobby so take my explanation below with a grain of salt.

Explanation:

First things first since you decided to go with React i decided to separate the Rating button as its own component. Its always recommended to separate a React site to as many components as possible ESPECIALLY those which components are on the site multiple times and also change based on state

Since the content of the Button is static (numbers between 1-5) I decide to map over an array of 1-5 and creating the buttons that way. Not only it is less lines of code but you feel more cool if you do it that way.

The background of the button will change if the id of your rate state is the same as the value of the button otherwise the background goes back to its original color.

As of right now unfortunately you have to specify each css attribute change on click in the RatingCircle component, I couldnt find a better way to implement it with the rate´s style key-value pair but in this case i believe its sufficient because we only want to change the backgorund color.

As for the hover i couldnt style it the same way as the click since both of them change the background which lead to conflict. So i decided to create a CSS class name hovered and toggle it onMouseOver, and onMouseLeave.

Side note: You maybe noticed that i deleted the ...state spread operator in the onClick event. Thats because it didnt really do anything your case beacause you changed all of your state´s field inside your onClick function.

Hopefully my added code fixed your issues and learnt something from them.If you have any questions i´ll try my best to answer.

Marked as helpful

Abdulquddus• 210

@lexzee

Posted over 1 year ago

Thank You very much DrZero.

This helps a lot.

Interactive Rating Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community