CODEWITHSUNDEEP
javascripthtmlcssreactjsonclick
vishnu
vishnu

Reputation: 2948

ReactJS onclick toggle class event multiple times

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.

Upvotes: 0

Views: 863

Answers (2)

vishnu
vishnu

Reputation: 2948

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

Upvotes: 0

Magofoco
Magofoco

Reputation: 5446

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

Upvotes: 1

Related Questions