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>

Answer 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>