0 votes
in ReactJS by

How to conditionally apply class attributes?

1 Answer

0 votes
by

You shouldn't use curly braces inside quotes because it is going to be evaluated as a string.

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

Instead you need to move curly braces outside (don't forget to include spaces between class names):

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

Template strings will also work:

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

Related questions

0 votes
asked Oct 31, 2023 in ReactJS by AdilsonLima
0 votes
asked Feb 24, 2021 in ReactJS by SakshiSharma
...