How to conditionally apply CSS classes in React JS

You can simply condition class to state, like this:

<div className={ this.state.exampleIsTruthy ? 'yourClass' : '' }>
  text
</div>

or if you want to switch classes based on a state like this:

<div className={ this.state.exampleTrueOrFalse ? 'shown' : 'hidden' }>
  text
</div>

Leave a Comment