I'm using PostCSS with React and wanted to add a regular class and modifier class based on my ponent's state. In short I'd like to perform a show/hide toggle based on the presence/absence of a search input query. Unfortunately it appears that using bracket notation is just rendering the class names in a way that they're unrecognizable.

className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>

Has anyone encountered this with a workaround?

import React, { Component } from 'react';
import styles from './SiteSearch.css';

class SiteSearch extends Component {
  constructor(props) {
    super(props);

    this.state = {
      suggestions: [],
      suggestionsAvailable: false
    };
  }

  render() {
    return(
      <form>
        ...
        <div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
         ...
       </div>
      </form>
    );
  }
}

.site-search__suggestions {
  display: none;
  position: absolute;
  margin-top: 5px;
  border: 1px solid #e0e3e5;
  height: 240px;
  width: 100%;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.9);
}

.site-search__suggestions--active {
  display: block;
}

I'm using PostCSS with React and wanted to add a regular class and modifier class based on my ponent's state. In short I'd like to perform a show/hide toggle based on the presence/absence of a search input query. Unfortunately it appears that using bracket notation is just rendering the class names in a way that they're unrecognizable.

className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>

Has anyone encountered this with a workaround?

import React, { Component } from 'react';
import styles from './SiteSearch.css';

class SiteSearch extends Component {
  constructor(props) {
    super(props);

    this.state = {
      suggestions: [],
      suggestionsAvailable: false
    };
  }

  render() {
    return(
      <form>
        ...
        <div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
         ...
       </div>
      </form>
    );
  }
}

.site-search__suggestions {
  display: none;
  position: absolute;
  margin-top: 5px;
  border: 1px solid #e0e3e5;
  height: 240px;
  width: 100%;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.9);
}

.site-search__suggestions--active {
  display: block;
}

• javascript
• css
• reactjs
• ternary-operator
• postcss

• <div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] : styles['site-search__suggestions'] }> does that line work? (i.e. only applying one style) – simon Commented Oct 19, 2016 at 19:25
• Yes but check out how my modifier class is setup. Doing it the way you've described would require me to copy all the styling from the base class. – Carl Edwards Commented Oct 19, 2016 at 19:35
• 1 if it works with only one style like my example there, then this might do the trick: <div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }> tell me if it works and I'll leave it as an answer. When it's parsing your solution I don't think it knows what to do when there is space between the styles like that – simon Commented Oct 19, 2016 at 19:55
• Yes, that works! You inspired me to go a step further and discover that this can also be done using ES2015 template literals as well: ${styles['site-search__suggestions'] styles['site-search__suggestions--active']}. Both sound solutions nonetheless. – Carl Edwards Commented Oct 19, 2016 at 19:59

3 Answers 3

<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>

Is what's needed for this to work, the strings have to be concatenated to show up properly.

@Carl Edwards also had a solution for ES2015 that uses a template literal:

${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}

You can use .join(' ').

To join more than one substring, you need to make array[ ].

<div className={ this.state.suggestionsAvailable ? [styles['site-search__suggestions'],styles['site-search__suggestions--active']].join(' ') : styles['site-search__suggestions'] }>

you can also use Object.assign to bine multiple objects into one new Object

Object.assign{{},styles['site-search__suggestions'],styles['site-search__suggestions--active'] }

https://developer.mozilla/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign