title: When importing styles into a React component, how do I assign a className that updates based off state?
body: <p>I'm using style-loader to inject css modularly into my components ({style.exampleClassName}). </p>
  
  <p>I want to display a loader for a set amount of time then display an image (at least 16 of these components in a grid pattern).</p>
  
  <p>My current component looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Child Component
  
  /**
  *
  * Sets up props for the child (icon)
  *
  */
  
  import React, { Component } from 'react';
  import styles from './styles.css';
  
  class Child extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        hidden : "shown",
        loading: "loading"
      };
    }
  
    componentDidMount() {
      const self = this;
      const wait = this.props.wait;
  
      console.log('mounted');
      setTimeout(() =&gt; {
        console.log('timeout working ' + wait);
        self.setState({
          hidden: "hidden",
          loading: "loaded"
        });
      }, wait);
    }
  
  
    render() {
  
      const hidden = `styles.${this.state.hidden}`;
      const loading = `styles.${this.state.loading}`;
  
        return (
          &lt;div&gt;
          &lt;link rel="stylesheet" type="text/css" href="./app/components/socialgrid/styles.css" /&gt;
            &lt;div className={this.state.hidden}&gt;
                &lt;p&gt;Loading...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className={this.state.loading}&gt;
                &lt;p&gt;Child - {this.props.wait}ms&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
    }
  
  };
  
  export default Child;
  
  
  // Parent
  
  /**
  *
  * Individual Icon Component
  *
  */
  
  import React, { Component } from 'react';
  import cx from 'classnames';
  import Img from 'components/Img';
  import Child from './Child';
  
  // import Fb from './Fb.png';
  
  class IndIcon extends React.Component{
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
       &lt;Child wait={1000} /&gt;
       &lt;Child wait={5000} /&gt;
       &lt;Child wait={4000} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  };
  
  
  export default IndIcon;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden,
  .loading{
    display: none;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Normally my styles would inject themselves by className={styles.exampleClassName} but here I'm running into the issue of the class not being injected because the class changes based of state (as I said above, just trying different wording to be clear).</p>
  
  <p>I want to assign more than just the display:none element so I do need classes on these components.</p>
  
  <p>Help would be appreciated. Thanks!</p>