ReactJS onclick toggle class event multiple times-CodePudding

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.

CodePudding user response：

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"/>
    </>
  );
}

CodePudding user response：

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" />
  );
}