<h3 dir="auto">Description</h3>
<p dir="auto">The current <code class="notranslate">className</code> prop on any JSX element takes only a string, that is supposed to be the class name to add to the corresponding element. This prop expects a string which makes it very easy to attach a single class name to the element.</p>
<p dir="auto">For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div className=&quot;my-css-class-name&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div className="my-css-class-name"&gt;&lt;/div&gt;
</code></pre></div>
<h3 dir="auto">Problem</h3>
<p dir="auto">The limitation I ran into while using className, is when I wanted to attach a couple classes to the same element, I naturally tried to do something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div className={&quot;my-css-class-name&quot;, &quot;my-other-css-class-name&quot;}&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div className={"my-css-class-name", "my-other-css-class-name"}&gt;&lt;/div&gt;
</code></pre></div>
<p dir="auto">But unfortunately it didn't work, <a href="https://reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components" rel="nofollow">I then realized that it's not possible with the current JSX specification</a>.</p>
<p dir="auto">The proposed solution in the FAQ link I shared above suggests manually attaching the strings and add a space, or use another package called <a href="https://www.npmjs.com/package/classnames#usage-with-reactjs" rel="nofollow">"Classnames"</a>.</p>
<h3 dir="auto">Feature Proposal</h3>
<p dir="auto">I as a react user, expected naturally that I could provide multiple classes with JSX, so I think it can be useful for other developers, if the prop <code class="notranslate">className</code> can take an array of strings (classes) and does a simple <code class="notranslate">Array.join(" ")</code> in this case. So that developers won't have to join them manually or use the other package "Classnames". I believe this could be beneficial for the simple use case, and also for a more advanced use case like mine (using Material UI's <code class="notranslate">makeStyles</code>).</p>
<p dir="auto">I would appreciate your thoughts on this suggestion. Furthermore, if discussion concludes that you agree to adopt such change, I would be more than happy to contribute it, as by chance I was looking at the beginner-friendly issues for contributors a couple days ago and couldn't find something (they're all assigned).</p>
<p dir="auto">I often use components that both have an internal <code class="notranslate">className</code> as well as an optional <code class="notranslate">className</code> passed in as a prop. The way I've been implementing this is either through (A) a local array that I construct and serialize into the <code class="notranslate">className</code> prop, or (B) through using <code class="notranslate">React.addons.classSet</code>.</p>
<p dir="auto">A:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classNames = ['my-component'];
if (this.props.className) {
  classNames.push(this.props.className);
}
return &lt;MyComponent className={classNames.join(' ')} /&gt;;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">classNames</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'my-component'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">classNames</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">MyComponent</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">classNames</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">' '</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">B:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var classes = {
  'my-component': true
};
if (this.props.className) {
  classes[this.props.className] = true;
}
return &lt;MyComponent className={React.addons.classSet(classes)} /&gt;;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">classes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-s">'my-component'</span>: <span class="pl-c1">true</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">classes</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">MyComponent</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">addons</span><span class="pl-kos">.</span><span class="pl-en">classSet</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">A is slightly less verbose, but harder to use if you have modifier classes as well (e.g. <code class="notranslate">my-component--is-selected</code>).</p>
<p dir="auto">I'm suggesting allowing the className to be a string <em>or</em> an array. And if it is an array, React internals would compact and serialize the className array into a className string.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return &lt;MyComponent className={['my-component', this.props.className]} /&gt;;"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">MyComponent</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-s">'my-component'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">]</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If this is a good idea, I could make an attempt at a PR.</p>