在 react.js 中切换 class div 元素

Question

Hi I am newbie in Reactjs.

I am trying to make each different toggle div classes when click buttons.

import React from 'react';

class Home extends React.Component{
  
  state = { isActive: false }; 
  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  }; 

  render(){  
    const isActive = this.state.isActive; 

    return (
      <>
        <button onClick={this.handleToggle} className={isActive ? "btn1" : "btn-on1"}>Toggle class1</button>
        <div className={isActive ? "box1" : "box-active1"}>11</div>
        <br />
        <button onClick={this.handleToggle} className={isActive ? "btn2" : "btn-on2"}>Toggle class2</button>
        <div className={isActive ? "box2" : "box-active2"}>22</div>
      </>
    )
  }
}
  
export default Home;

The problem is when click button, both button toggle together at same time. I want to make them each button toggle only itself.

How do I fix it?

Answer 1

I think you could achieve this by changing the state from boolean so it can refer to a specific div:

state = { isActive: '' }; 
  handleToggle = (btn) => {
    this.setState({ isActive: btn });
  }; 

  render(){  
    const isActive = this.state.isActive; 

    return (
      <>
        <button onClick={() => this.handleToggle('button1')} className={isActive === 'button1' ? "btn1" : "btn-on1"}>Toggle class1</button>
        <div className={isActive === 'button1' ? "box1" : "box-active1"}>11</div>
        <br />
        <button onClick={() => this.handleToggle('button2')} className={isActive === 'button2' ? "btn2" : "btn-on2"}>Toggle class2</button>
        <div className={isActive === 'button2' ? "box2" : "box-active2"}>22</div>
      </>
    )
  }