How to add "active" class onClick on different buttons in react

Question

I have two different buttons and I'm trying to add active class in React,but on click is added to both at the same time. Active class has a background white. Initial class has a blue background. This is my code.

import React, { PureComponent } from "react";

class AnimationSettings extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      active: true
    };
  }

  handleClick = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    const { active } = this.state;
    console.log(active);
    return (
      <div className="animation-buttons">
        /}
        <button
          onClick={this.handleClick}
          className={active ? "btn-animation" : "active-animation"}
        >
          On
        </button>
        <button
          onClick={this.handleClick}
          className={active ? "btn-animation" : "active-animation"}
        >
          Off
        </button>
      </div>
    );
  }
}

export default AnimationSettings;

So you only want one to be active at once? Just flip the ternary on one of them like: className={active ? "active-animation" : "btn-animation"} ? — Tom Finney
– Tom Finney, Commented Mar 26, 2019 at 14:16
You can create a Button component and make it managing his own state, or create two variables in state on your component — Rafael Lima
– Rafael Lima, Commented Mar 26, 2019 at 14:24
Did any of the answers work for you? Consider accepting one of them if that's the case. — Tholle
– Tholle, Commented Mar 28, 2019 at 20:47

Tholle · Accepted Answer · 2019-03-26 14:17:21Z

One way of going about it is to keep a separate variable in state for each button.

Example

class AnimationSettings extends React.PureComponent {
  state = {
    isFirstActive: false,
    isSecondActive: false
  };

  handleFirstClick = () => {
    this.setState(({ isFirstActive }) => ({ isFirstActive: !isFirstActive }));
  };

  handleSecondClick = () => {
    this.setState(({ isSecondActive }) => ({
      isSecondActive: !isSecondActive
    }));
  };

  render() {
    const { isFirstActive, isSecondActive } = this.state;

    return (
      <div className="animation-buttons">
        <button
          onClick={this.handleFirstClick}
          className={isFirstActive ? "btn-animation" : "active-animation"}
        >
          On {isFirstActive && "(active)"}
        </button>
        <button
          onClick={this.handleSecondClick}
          className={isSecondActive ? "btn-animation" : "active-animation"}
        >
          Off {isSecondActive && "(active)"}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<AnimationSettings />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Engineer · Accepted Answer · 2019-03-26 14:44:19Z

This is the working solution,

class AnimationSettings extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      active: true,
      buttonIdsArray: ["button1", "button2"]
    };
  }
  componentDidMount() {
    this.initButton();
  }
  initButton = () => {
    this.state.buttonIdsArray.forEach(button => {
      document.getElementById(button).classList.remove("active-button");
      document.getElementById(button).classList.add("inactive-button");
    });
  };
  handleClick = id => {
    this.initButton();
    document.getElementById(id).classList.add("active-button");
    document.getElementById(id).classList.remove("inactive-button");
    this.setState({ active: !this.state.active });
  };

  render() {
    const { active } = this.state.active;
    console.log(active);
    return (
      <div className="animation-buttons">
        <button
          id="button1"
          onClick={() => this.handleClick("button1")}
          className={active ? "btn-animation" : "active-animation"}
        >
          On
        </button>
        <button
          id="button2"
          onClick={() => this.handleClick("button2")}
          className={active ? "btn-animation" : "active-animation"}
        >
          Off
        </button>
      </div>
    );
  }
}

ReactDOM.render(<AnimationSettings />, document.getElementById("root"));

.active-button {
  background-color: #fff;
}
.inactive-button {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

i hope it helps!

Syn · Accepted Answer · 2019-03-26 14:29:41Z

0

If the two buttons shouldn't be active at the same time, you can change the condition :

On :

active ? "btn-animation" : "active-animation"

Off :

!active ? "btn-animation" : "active-animation"

edited Mar 26, 2019 at 14:29

answered Mar 26, 2019 at 14:23

Syn

12 bronze badges

Comments

Jamal Ashraf · Accepted Answer · 2022-05-22 16:26:38Z

One of the easiest solution for this problem. You need an active state for this purpose. This solution would definitely help you.

const {useState,Fragment} = React;

const App = () => {
  const [active, setActive] = useState("");
 
  const handleClick = (event) => {
    setActive(event.target.id);
    
  }

    return (
      <Fragment>
      <button
        key={1}
        className={active === "1" ? "active" : undefined}
        id={"1"}
        onClick={handleClick}
      >
        Solution
      </button>

       <button
       key={2}
       className={active === "2" ? "active" : undefined}
       id={"2"}
       onClick={handleClick}
     >
      By
     </button>

      <button
      key={3}
      className={active === "3" ? "active" : undefined}
      id={"3"}
      onClick={handleClick}
    >
        Jamal
    </button>
</Fragment>

    );
}


 ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

.active{
background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 <div id="react"></div>

Collectives™ on Stack Overflow

How to add "active" class onClick on different buttons in react

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related