Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

584
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda