Update ClassNames on State change React js

Question

Is there a way to update a classNames var (in this case 'btClasses') on State change?

...
    state = {
       active: true
    };

    btClasses = classNames({
      'main-class': true,
      'activeClass': this.state.active
    });

    _handleBtn = () => {
       this.setState({active: !this.state.active});
    } 

    return (
        <button 
           onClick={this._handleBtn} 
           className={btClasses} \>
    );
... 

Answer 1

Currently, you initialize the className once, usually, you pass it as property:

class App extends React.Component {
  state = {
    active: true
  };

  handleBtn = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    return (
      <button
        onClick={this.handleBtn}
        className={classNames({
          "main-class": true,
          activeClass: this.state.active
        })}
      >
        {this.state.active ? "true" : "false"}
      </button>
    );
  }
}