Pass style array to React Component

Question

I want to pass an array of styles to a React Component using postcss-loader and css modules. My webpack.config.file for compiling css files looks like this:

loaders: [
    'style-loader', 
    'css-loader?modules&importLoaders=1&localIdentName[name]__[local]___[hash:base64:5]',
    'postcss-loader'
],

My React Component file looks like this:

import styles from './cssFile.css';
class Component extends React.Component{
    render(){
       return(
           <div className={[styles.spinner, styles.spinner_2]}></div>
       )
    }   
}

Whenever I pass only one style to className it loads it correctly but when I pass an array it does not resolve any of them. Instead it concatenates it with a comma on the compile class name.

How can I pass several styles to an element?

Answer 1

React's className expects a string of class names, and not an array:

import styles from './cssFile.css';
class Component extends React.Component{
    <div className={ [styles.spinner, styles.spinner_2].join(' ') }></div>
}