0

I want to apply the 'side-nav--selected' style if location = 'test'

const location = 'test';
...
<div className='side-nav--item {if location === 'test' && side-nav--selected'}>Test</div>
<div className='side-nav--item {if location === 'left' && side-nav--selected'}>Left</div>

The error I get is Parsing error: Identifier expected

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
Bill
  • 4,614
  • 13
  • 77
  • 132

1 Answers1

2
<div className={`side-nav--item ${second === 'test' && 'side-nav--selected'}`}>...</div>
<div className={`side-nav--item ${second === 'left' && 'side-nav--selected'}`}>...</div>

using ternary operator

<div className={`side-nav--item ${second === 'test' ? 'side-nav--selected' : '' }`}>...</div>
<div className={`side-nav--item ${second === 'left' ? 'side-nav--selected' : '' }`}>...</div>
louie kim
  • 509
  • 4
  • 8
  • 2
    Using ternary operator would be better. If the condition `second === 'test'` evaluate to `false` then `false` as string would be appended to the className. – Sahil Raj Thapa Dec 02 '19 at 04:27