Изменить имя класса изменения при изменении состояния

У меня такое состояние, когда я устанавливаю флаг active и class следующим образом:

constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(id) {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }

И у меня есть список элементов с именем класса из состояния:

<div className={this.state.class} key={data.id} onClick={this.handleClick.bind(this.data.id}>
    <p>{data.name}</p>
</div>

Здесь, как я могу изменить имя класса для определенного div?

ОТВЕТЫ

Ответ 1

Ниже приведен полнофункциональный пример того, что, как я считаю, вы пытаетесь сделать (с функциональным фрагментом).

Объяснение

В соответствии с вашим вопросом вы, кажется, изменяете 1 свойство в state для всех своих элементов. Поэтому, когда вы нажимаете на один, все они меняются.

В частности, обратите внимание, что состояние отслеживает индекс, из которого элемент активен. При нажатии MyClickable он сообщает Container своему индексу, Container обновляет свойство state, а затем свойство isActive соответствующих MyClickable s.

Пример

class Container extends React.Component {
  state = {
    activeIndex: null
  }

  handleClick = (index) => this.setState({ activeIndex: index })

  render() {
    return <div>
      <MyClickable name="a" index={0} isActive={ this.state.activeIndex===0 } onClick={ this.handleClick } />
      <MyClickable name="b" index={1} isActive={ this.state.activeIndex===1 } onClick={ this.handleClick }/>
      <MyClickable name="c" index={2} isActive={ this.state.activeIndex===2 } onClick={ this.handleClick }/>
    </div>
  }
}

class MyClickable extends React.Component {
  handleClick = () => this.props.onClick(this.props.index)
  
  render() {
    return <button
      type='button'
      className={
        this.props.isActive ? 'active' : 'album'
      }
      onClick={ this.handleClick }
    >
      <span>{ this.props.name }</span>
    </button>
  }
}

ReactDOM.render(<Container />, document.getElementById('app'))
button {
  display: block;
  margin-bottom: 1em;
}

.album>span:after {
  content: ' (an album)';
}

.active {
  font-weight: bold;
}

.active>span:after {
  content: ' ACTIVE';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="app"></div>