`export default function Ratings(props){ const[hover,setHover] =useState(false); // checks for hover state const [com, setCom] = useState(false); //checks for click state
function isHover(){
setHover(true);} //connects to onMouseOver event then sets the hover state
function isNotHover(){ //connects to onMouseLeave event then sets the hover state
setHover(false);}
function op(){ //Send the Id of the rating button back to app.js so
props.op(props.id);} // it can be then forwarded to another page
function designs(){ //connects the click to sate, if the state is true it makes it false
com ? setCom(false):setCom(true)} // and vice verca
function bth(){ // I have two functions on click so this combines both
op() //the functions and gives it as one to the clicke event
designs()}
pressed //is style after clicked
rateStyle //is style before clicked
return(
<div style={hover|| com ? pressed: rateStyle} onMouseOver={isHover}
onMouseLeave={isNotHover} onClick={bth} >
{props.valN}
</div>)
}`I have five rating buttons and I want to unclick the already clicked button when another one is clicked. By clicking I mean, When I click one of the buttons their style is changed mainly background colour now I want when somebody presses another rating I want the style for the previously clicked button to go back to normal and the newly pressed button to go to active state help.
I used this method for this question.
inside your button
<button id="button" onClick={
(e) => {
if(res === "unpressed"){
//if button is pressed for first
//time
e.target.style.backgroundColor ="rgb(195, 197, 64)";
setRes(pressed);
//Update res into false
}else{
//if button is pressed for second
//time
e.target.style.backgroundColor ="rgb(195, 17, 64)";
setRes(unpressed);
//Update res into false
}
}
}>
STAR
</button>
using Hooks
import { useState } from "react";
const [res,setRes] = useState("unpressed");