Aquí he creado los botones que tienen un evento onclick
<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>Esta es la función que llama el evento onClick
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); }) }Creé un grupo de botones que actualizan mi llamada API cuando se hace clic. Quiero que estos botones cambien de color cuando ese botón esté activo.
Debe definir un nuevo estado para una verificación de botón activo
const [activeButton, setActiveButton] = useState() Y luego use ese activeButton activo para agregar una clase active
<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> También necesita tener estilos para la clase active .
.OptionButton.active{ background-color: yellow; }La última parte es modificar su evento de clic.
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); }) }Para simplemente cambiar el color de un botón activo, defina su clase css con algo como esto:
.OptionButton{ background-color: 'white'; } .OptionButton:active{ background-color: 'blue'; }className={active ? "tabs-button active" : "tabs-button deactive"}Así que básicamente le da una clase de activo y botón de pestañas cuando el botón está activo, y si no está activo, le dará una clase de activo y botón de pestañas.
Espero que esto te ayude o te dé una idea de cómo lograr tu objetivo.