How can I use this onclick toggle class event multiple times?
const [isActive, setActive] = React.useState(false);
<button
onClick={() => setActive(!isActive)}
className={`toggle ${isActive ? "active" : ""}`}
>
Categories
</button>
Here is the issue in Sandbox: https://codesandbox.io/s/agitated-pond-tewk9h?file=/src/App.js
When click on any button it works for all others.
You should create a component for your button that contains the useState. Else, the useState is global for all the components that use it.
Example: 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"/>
</>
);
}
This is for reference:
Edited answer from Magofoco
Passing button text & ID:
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" />
);
}