React toggle class

Question

I want toggle class only click element. But now when i click anyone they are all active. And when i click a tag, i want add another class to card div. How should i update the code?

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

<div className="container">
   <div>
     <h1>Components</h1>
     <div>
        <a href="#" onClick={this.handleClick.bind(this)} className= {this.state.active ? "card-icon active" : "card-icon"}>click</a>
        <a href="#" onClick={this.handleClick.bind(this)} className= {this.state.active ? "list-icon active" : "list-icon"}>click</a>
     </div>
   </div>
   <input type="text" placeholder="" className="input" onChange={(e)=>this.searchSpace(e)}  />
   <div className="card">
     {items}
   </div>
</div>

Domino987 · Accepted Answer · 2020-05-22 13:13:57Z

1

You are only tracking the state with one variable (active), but you need to keep track of each state separately. Try this:

Updated to handle toggle:

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

<div className="container">
   <div>
     <h1>Components</h1>
     <div>
        <a href="#" onClick={this.handleClick.bind(this)} className= {this.state.active ? "card-icon active" : "card-icon"}>click</a>
        <a href="#" onClick={this.handleClick.bind(this)} className= {!this.state.active ? "list-icon active" : "list-icon"}>click</a>
     </div>
   </div>
   <input type="text" placeholder="" className="input" onChange={(e)=>this.searchSpace(e)}  />
   <div className={this.state.active ? "card" : "list"}>
     {items}
   </div>
</div>

edited May 22, 2020 at 13:13

answered May 22, 2020 at 12:53

Domino987

8,8642 gold badges17 silver badges40 bronze badges

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

6 Comments

paws Over a year ago

Thank you! it's okey but I couldn't explain it correctly. When the element I click is active, the other one should not be active.

Domino987 Over a year ago

So you want it to be toggled instead of both active?

paws Over a year ago

yes, and the same time <div className="card"> this class should change card to list

paws Over a year ago

Thanks a lot! it almost happened but when i click both a tag are active :(

Domino987 Over a year ago

Did you add the ! for !this.state.active ? "list-icon active" ?

|

subashMahapatra · Accepted Answer · 2020-05-22 13:04:07Z

You should be using multiple state variables and also use function to update the state, so when you set cart-icon to active the list-icon state does not change. See the example below. let me know if it helps.

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cartIconActive: false,
      listIconActive: false,
    };
    this.handleCartIconClick = this.handleCartIconClick.bind(this);
    this.handleListIconClick = this.handleListIconClick.bind(this);
  }

  handleCartIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      cartIconActive: !prevState.cartIconActive,
    }));
  }

  handleListIconClick() {
    this.setState((prevState) => ({
      ...prevState,
      listIconActive: !prevState.listIconActive,
    }));
  }

  render() {
    const { cartIconActive, listIconActive } = this.state;
    return (
      <div className="container">
        <div>
          <h1>Components</h1>
          <div>
            <a
              href="#"
              onClick={this.handleCartIconClick}
              className={cartIconActive ? 'card-icon active' : 'card-icon'}
            >
              click
            </a>
            <a
              href="#"
              onClick={this.handleListIconClick}
              className={listIconActive ? 'list-icon active' : 'list-icon'}
            >
              click
            </a>
          </div>
        </div>
        <input
          type="text"
          placeholder=""
          className="input"
          onChange={(e) => this.searchSpace(e)}
        />
        <div className="card">{items}</div>
      </div>
    );
  }
}

Joynal Abedin · Accepted Answer · 2022-03-28 18:26:30Z

0

You can also do this with

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': null} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}

answered Mar 28, 2022 at 18:26

Joynal Abedin

215 bronze badges

Collectives™ on Stack Overflow

React toggle class

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related