title: Conditional rendering class with map for React
body: <p>I am not even sure if what I am trying is possible but here goes.  For starters, I have an array of objects where each object has two key:value pairs.  One key is "name", and the second key is a "genre".</p>
  
  <p>Each of these objects is mapped into a div, using its genre in the class, which is then placed into a container div.  What I am trying to do is control the class of each individual div by its class name which I control via the component's state.  An idea of what I have is as follows:</p>
  
  <pre><code>  constructor(props) {
  super(props);
  
  this.state = {
    fineArt: false,
    game: false,
    literature: false,
    movie: false,
    music: false,
    tv: false
  }
  
  
  &lt;div className="inspiration-container"&gt;
   {inspirations.map((item) =&gt; (`${this.state}.item.genre`) ? &lt;div className={`inspiration ${item.genre}__selected`} key={item.name}&gt;{item.name}&lt;/div&gt; :
       &lt;div className={`inspiration ${item.genre}`} key={item.name}&gt;{item.name}&lt;/div&gt;)}
  &lt;/div&gt;
  </code></pre>
  
  <p>An example using a "game" would be for it to map the div out, and to check the value for "this.state.game".  If that value is true it renders the div with the class of "inspiration game__selected" and if it is false it would just render "inspiration game".</p>
  
  <p>I know this sort of thing is possible because I have already used it as:</p>
  
  <pre><code>{this.state.game ? 
              &lt;a className="inspiration-button" onClick={this.toggleGame}&gt;&lt;div className="game-button__selected"&gt;&lt;/div&gt;Game&lt;/a&gt; : 
              &lt;a className="inspiration-button" onClick={this.toggleGame}&gt;&lt;div className="game-button__unselected"&gt;&lt;/div&gt;Game&lt;/a&gt;}
  </code></pre>
  
  <p>My two trains of thought are that either 1) I am doing something wrong or 2) I  am unable to access the state in this manner (because of how the mapping works).  If I am doing something wrong, I assume it would be somewhere in the beginning of my ternary operator.  The current result I am getting is the ternary operation is always true.</p>
  
  <p>Any help is appreciated and thank your for reading this and any help you can provide.</p>