Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

582
Views
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.

about 4 years ago · Santiago Gelvez
3 answers
Answer question

0

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);
    })
}
about 4 years ago · Santiago Gelvez Report

0

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

about 4 years ago · Santiago Gelvez Report

0

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.

about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!