CODEWITHSUNDEEP
reactjs
d.s
d.s

Reputation: 33

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

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;

Upvotes: 1

Views: 5310

Answers (4)

Jamal Ashraf
Jamal Ashraf

Reputation: 935

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>

Upvotes: 0

Engineer
Engineer

Reputation: 1261

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!

Upvotes: 1

Syn
Syn

Reputation: 1

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"

Upvotes: 0

Tholle
Tholle

Reputation: 112777

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>

Upvotes: 1

Related Questions