React onClick add class to clicked element but remove from the others

Question

so what i try to achieve here is very similar to what is done here Transition flex-grow of items in a flexbox

But what i wonder how this could be done with React say i h

Answer 1

You can set active index on click:

// State
this.state = {
  activeIndex: null
};
// event
onElementClicked(e) {
  this.setState({ activeIndex: e.target.index })
}
// class to use
className={this.index === this.state.activeIndex ? 'big-size' : ''}