Here I have created the buttons that have an onclick event
<div className="OptionsRow">
<button className="OptionButton one" value="1" onClick={e => changeTimeLine(e.target.value)}>Slow</button>
<button className="OptionButton two" value="2" onClick={e => changeTimeLine(e.target.value)}>Medium</button>
<button className="OptionButton three" value="3" onClick={e => changeTimeLine(e.target.value)}>Fast</button>
<button className="OptionButton four" value="4" onClick={e => changeTimeLine(e.target.value)}>Medium-Slow</button>
<button className="OptionButton five" value="5" onClick={e => changeTimeLine(e.target.value)}>Slow-Very Fast</button>
</div>
Here is the function the onClick event calls
function changeTimeLine(value){
axios.get('https://pokeapi.co/api/v2/growth-rate/' value '/') //growth rate
.then((res)=>{
let data=res.data;
for(let i=0; i<data.levels.length;i ){
experience.push(data.levels[i].experience);
level.push(data.levels[i].level);
};
setUpdateExperience(experience);
setUpdateLevel(level);
})
}
I have created a group of buttons that update my API call when clicked. I want these buttons to change colour when that button is active.
CodePudding user response:
You need to define a new state for an active button check
const [activeButton, setActiveButton] = useState()
And then use that activeButton
for adding active
class
<div className="OptionsRow">
<button className={`OptionButton one ${activeButton === "1" && "active"}`} value="1" onClick={e => changeTimeLine(e.target.value)}>Slow</button>
<button className={`OptionButton two ${activeButton === "2" && "active"}`} value="2" onClick={e => changeTimeLine(e.target.value)}>Medium</button>
<button className={`OptionButton three ${activeButton === "3" && "active"}`} value="3" onClick={e => changeTimeLine(e.target.value)}>Fast</button>
<button className={`OptionButton four ${activeButton === "4" && "active"}`} value="4" onClick={e => changeTimeLine(e.target.value)}>Medium-Slow</button>
<button className={`OptionButton five ${activeButton === "5" && "active"}`} value="5" onClick={e => changeTimeLine(e.target.value)}>Slow-Very Fast</button>
</div>
You also need to have styles for active
class
.OptionButton.active{
background-color: yellow;
}
The last part is modifying your click event
function changeTimeLine(value){
setActiveButton(value) //update your current active button state
axios.get('https://pokeapi.co/api/v2/growth-rate/' value '/') //growth rate
.then((res)=>{
let data=res.data;
for(let i=0; i<data.levels.length;i ){
experience.push(data.levels[i].experience);
level.push(data.levels[i].level);
};
setUpdateExperience(experience);
setUpdateLevel(level);
})
}
CodePudding user response:
To just change color of an active button, define your css class with something like this:
.OptionButton{
background-color: 'white';
}
.OptionButton:active{
background-color: 'blue';
}
CodePudding user response:
className={active ? "tabs-button active" : "tabs-button deactive"}
So basically it gives it a class of active and tabs-button when the button is active, and if it is not active it will give it a class of deactive and tabs-button.
Hope this helps or gives you an idea on how to accomplish your goal.