CODEWITHSUNDEEP
javascriptreactjsnavigation
Zena Mesfin
Zena Mesfin

Reputation: 421

How to set active class in react render method?

Using UI Kit

   <ul className='uk-nav'>
          {languages.map(function (lang) {
            return (
              <li
                style={lang === this.state.selectedLanguage ? {color: '#d0021b'} : null}
                onClick={this.updateLanguage.bind(null, lang)}
                key={lang}>
                  {lang}
              </li>
            )
          }, this)}
        </ul>

I was able to get the output to render add the style with the new color on click

How can i add css class name on this state

      className={lang === this.state.selectedLanguage ? {'uk-active'} : null}

How do you pass a classname with a condition.. in the same manner as style

Upvotes: 1

Views: 3189

Answers (1)

styfle
styfle

Reputation: 24670

The className is just a string. Try this:

 <ul className='uk-nav'>
          {languages.map(function (lang) {
            return (
              <li
                className={lang === this.state.selectedLanguage ? 'uk-active' : null}
                onClick={this.updateLanguage.bind(null, lang)}
                key={lang}>
                  {lang}
              </li>
            )
          }, this)}
        </ul>

Upvotes: 1

Related Questions