javascript - react change class name on state change

Question

I have a state like this where I am setting active and class flag like this:

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

And I have a list of items with class name from state:

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

Here how can I change the class name of particular div?

Answer 1

Below is a fully functional example of what I believe you're trying to do (with a functional snippet).

Explanation

Based on your question, you seem to be modifying 1 property in state for all of your elements. That's why when you click on one, all of them are being changed.

In particular, notice that the state tracks an index of which element is active. When MyClickable is clicked, it tells the Container its index, Container updates the state, and subsequently the isActive property of the appropriate MyClickables.

Example

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>