¿Cómo puedo usar este evento de clase alternar onclick varias veces?
const [isActive, setActive] = React.useState(false); <button onClick={() => setActive(!isActive)} className={`toggle ${isActive ? "active" : ""}`} > Categories </button>Aquí está el problema en Sandbox: https://codesandbox.io/s/agitated-pond-tewk9h?file=/src/App.js
Al hacer clic en cualquier botón, funciona para todos los demás.
Debe crear un componente para su botón que contenga useState. De lo contrario, useState es global para todos los componentes que lo usan.
Ejemplo: https://codesandbox.io/s/withered-feather-vj8owx?file=/src/App.js
const MyButtonComponent = ({myText}) => { const [isActive, setActive] = React.useState(false); return ( <button onClick={() => setActive(!isActive)} className={`toggle ${isActive ? "active" : ""}`} > {myText} </button> ); }; export default function App() { return ( <> <MyButtonComponent myText="Something" /> <MyButtonComponent myText="Something else"/> <MyButtonComponent myText="Else something"/> </> ); }Esto es para referencia:
Respuesta editada de Magofoco
Pasar texto e ID del botón:
const MyButtonComponent = ({ myText, myId }) => { const [isActive, setActive] = React.useState(false); return ( <Button onClick={() => setActive(!isActive)} className={`toggle ${isActive ? "active" : ""}`} id={myId} > {myText} </Button> ); }; export default function App() { return ( <MyButtonComponent myText="something" myId="tab01" /> ); }