Conditionally adding multiple classes in a ternary using React's className attribute with PostCSS
<p>I'm using PostCSS with React and wanted to add a regular class and modifier class based on my component'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. </p>

<pre><code>className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }&gt;
</code></pre>

<p>Has anyone encountered this with a workaround?</p>

<pre><code>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(
      &lt;form&gt;
        ...
        &lt;div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }&gt;
         ...
       &lt;/div&gt;
      &lt;/form&gt;
    );
  }
}
</code></pre>

<hr>

<pre><code>.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;
}
</code></pre>