Conditional rendering class with map for React - reactjs

Question

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".
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:
constructor(props) {
super(props);
this.state = {
fineArt: false,
game: false,
literature: false,
movie: false,
music: false,
tv: false
}
<div className="inspiration-container">
{inspirations.map((item) => (`${this.state}.item.genre`) ? <div className={`inspiration ${item.genre}__selected`} key={item.name}>{item.name}</div> :
<div className={`inspiration ${item.genre}`} key={item.name}>{item.name}</div>)}
</div>
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".
I know this sort of thing is possible because I have already used it as:
{this.state.game ?
<a className="inspiration-button" onClick={this.toggleGame}><div className="game-button__selected"></div>Game</a> :
<a className="inspiration-button" onClick={this.toggleGame}><div className="game-button__unselected"></div>Game</a>}
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.
Any help is appreciated and thank your for reading this and any help you can provide.

Answer 1

You are accessing your state incorrectly
(`${this.state}.item.genre`)
This outputs to [Object object].item.genre since you're trying to convert an object to a string.
What you want to do is access it by this.state[item.genre] which accesses the property in the state
So your code should be
{ inspirations.map((item) =>
this.state[item.genre] ?
<div className={`inspiration ${item.genre}__selected`} key={item.name}>
{item.name}
</div> :
<div className={`inspiration ${item.genre}`} key={item.name}>
{item.name}
</div>
)
}
Even better would be to use the package classnames mentioned in comments by #Bryan Downing
https://github.com/JedWatson/classnames
https://www.npmjs.com/package/classnames
This would be the ideal way to use classnames (Be careful of conflicting classnames though if you use common classnames)
import classnames from 'classnames';
// render function
{ inspirations.map((item) =>
<div
className={
classnames('inspiration', item.genre, {
[`__selected`]: item.genre
})
}
key={item.name}
>
{item.name}
</div>
)
}
// CSS
.inspiration {
... // Your css
}
// If css not the same as .selected then you can do
// .game:not(.selected)
.game {
// Your css
}
.game.selected {
// Your css
}
.movie {
// Your css
}
.movie.selected {
// Your css
}

Answer 2

Instead of conditionally returning two separate elements, you can conditionally create just the className instead:
{ inspirations.map( item => {
const className = `inspiration ${item.genre}${this.state[item.genre] ? '__selected' : ''}`;
return <div className={className} key={item.name}>
{item.name}
</div>
}}