toggle class div elements in react.js

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 ?

What is the issue that you are facing, what's not working well? — Nithish
– Nithish, Commented Apr 22, 2021 at 15:49
@Nithish I want to make them each button toggle only itself. — user1833620
– user1833620, Commented Apr 22, 2021 at 15:56
If you have multiple things that need their own state then each thing needs its own state; a single state value is insufficient. — Dave Newton
– Dave Newton, Commented Apr 22, 2021 at 16:01

derrmru · Accepted Answer · 2021-04-22 16:10:19Z

2

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

edited Apr 22, 2021 at 16:10

answered Apr 22, 2021 at 16:06

derrmru

615 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

toggle class div elements in react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related