Suponiendo que tiene un archivo src/index.css que contiene la clase css requerida... su secuencia de comandos actual asignará la clase "activa" a todos los botones a la vez. Para aplicar la clase a un solo botón, debe tener un objeto en un estado como este:

 const [daysActive, setDaysActive] = useState({ monday: false, tuesday: false... });

y en su método de alternar pasará la clave del día como tal:

 const handleToggle = (day) => { setDaysActive({ ...daysActive, [day]: !daysActive[day] }); }

entonces un botón jsx llamará a este controlador con su respectiva clave de día

 <button onClick={() => handleToggle("sunday")} className={daysActive["sunday"] ? "active" : null}>Sunday</button>

si desea que este conjunto de botones sea más limpio, puede usar la función de mapa

 const days = ["sunday", "monday", ...]; <div> {days.map((day) => ( <button ... /> ))} </div>

Una forma de hacer esto es usar un mapa de matriz con un índice como este:

 import React, { useState } from "react"; export default function App() { const days = ['Monday', 'Tuesday', ... ] const [activeIndex, setActiveIndex] = useState(-1); const handleToggle = (index) => { setActiveIndex(index); }; return ( <div > {days.map((day, index) => ( <button onClick={()=> handleToggle(index)} className={activeIndex === index ? "active" : null}>{day}</button> ) </div> ); }

Puede extraer sus accesorios de botones a una función si el marcado se vuelve un poco largo.

 export default function App() { const [chosen, choose] = React.useState(); const makeProps = (name) => ({ onClick: () => choose(name), className: chosen === name ? 'active' : null }) return ( <div className="App"> <button {...makeProps('one')}>one</button> <button {...makeProps('two')}>two</button> <button {...makeProps('duck')}>duck</button> </div> ); }

O encapsule todo el comportamiento en su propio componente 'ButtonThatCanBeActive' que toma un accesorio "activo" y "onClick".