'How to change button colour when active on React

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.

javascripthtmlcssreactjs


Solution 1:[1]

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);
    })
}

Solution 2:[2]

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';
}

Reference

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick Vu
Solution 2 arfi720
Solution 3 Vian du Plessis

Related Questions