[React] Togglowanie klasy

Question

Witam,

 

Jak togglować klasę danego elementu, który jest tworzony poprzez funkcje map?

  {this.state.expenses.map((el,index)=>{
            return (
              <li key={`key-expence-${index}`}className="input-wrapper" identificator={el.id} onClick={this.activeClass}>
              <select className="category-select" defaultValue={el.category}>
                <option value="home"></option>
                <option value="car"></option>
                <option value="eat"></option>
              </select>
              <input className="input-encepce" identificator={el.id} defaultValue={el.title} onKeyUp={this.updateTask} placeholder="Encepce"/>
              <input className="input-price" identificator={el.id} defaultValue={el.price}  placeholder="Price" onBlur={this.updateEncences} onFocus={this.encenceValueControl} min="0" type="number"/>
              </li>
            )
          })}

Chodzi o zmianę klasy po kliknięciu do tylko jednego (klikniętego) elementu, a nie wszystkich na raz.

Answer 1

Możesz np. przekazywać ID klikniętego elementu do funkcji odpowiadającą za event click, wtedy robisz prostego if-a i powinno śmigać.

Powinno wyglądać to jakoś tak:

this.activeClass.bind(this, id)

 

Answer 2

Możesz skorzystać z classnames -> link, no i poprzez zamianę state możesz togglować daną klasę czy kilka klas dla danego elementu.