title: How to assign multiple css classes as an array to a jsx variable in React, and then assign the variable to the className with join() function
body: <pre><code>import React from 'react';
  import classes from './SideDrawer.css';
  import Logo from '../../Logo/Logo';
  import NavigationItems from '../NavigationItems/NavigationItems';
  import Backdrop from '../../UI/Backdrop/Backdrop';
  import Aux from '../../../hoc/Auxiliary';
  
  const sideDrawer = (props) =&gt; {
  </code></pre>
  <p>Since I am not able to assign className in the format of
  <code>class.SideDrawer</code>, I have to use the format in <code>className='SideDrawer'</code></p>
  <pre><code>let attachedClasses= {
      &lt;div className = 'SideDrawer' 'Closed'&gt;&lt;/div&gt;
  }
  
  
  if(props.open){
  return(
          attachedClasses=&lt;div className= 'SideDrawer' 'Open'&gt; &lt;/div&gt; 
      )
  }
  
  
  return(
      &lt;Aux&gt;
          &lt;Backdrop show={props.open} clicked={props.closed}/&gt;
  </code></pre>
  <p>Also I cannot assign the variable <code>attachedClasses</code> to <code>className</code>
  and use the join function.</p>
  <pre><code>        &lt;div className = {attachedClasses.join(' ')} &gt;
              &lt;Logo height=&quot;11%&quot; /&gt;
              &lt;nav&gt;
                  &lt;NavigationItems /&gt;
              &lt;/nav&gt;
          &lt;/div&gt;    
      &lt;/Aux&gt;
      )
  
  }
  
  
  export default sideDrawer;
  </code></pre>