score: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"

score:0

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>

score:1

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>

score:1

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!


Related Query

More Query from same tag