Design comparison
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
- @DrZero1234Posted 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 helpful1
Please log in to post a comment
Log in with GitHub
Join 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