<p dir="auto">It is often the case that multiple CSS classes are used for an element, and sometimes they are dynamically generated. In such situations the client code needs to concatenate them into a string</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const classes = getCSSClasses();
return (
    &lt;div className={classes.class1 + &quot; &quot; + classes.class2}&gt; foo &lt;/div&gt;
);"><pre class="notranslate"><code class="notranslate">const classes = getCSSClasses();
return (
    &lt;div className={classes.class1 + " " + classes.class2}&gt; foo &lt;/div&gt;
);
</code></pre></div>
<p dir="auto">I always felt the need to be able to pass the classes as an array:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const classes = getCSSClasses();
return (
    &lt;div classes={[classes.class1, classes.class2]}&gt; foo &lt;/div&gt;
);"><pre class="notranslate"><code class="notranslate">const classes = getCSSClasses();
return (
    &lt;div classes={[classes.class1, classes.class2]}&gt; foo &lt;/div&gt;
);
</code></pre></div>
<p dir="auto">In addition to the convenience of such a property, maybe it could help with performance, in the sense that equality could be checked before string concatenation, and only do the concatenation if the element needs to be rendered.</p>
<p dir="auto">The drawback here is of course the mutable nature of an array. I imagine performance would be better if the array would be immutable. So maybe this new property could work only with some immutable array implementation. Or frozen arrays.</p>
<p dir="auto">In short, I want such a property for convenience, but maybe it also has potential for some performance improvements.</p>
<p dir="auto">Hi!</p>
<p dir="auto">I usually am in the situation where I have to write code like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return (
  &lt;div className={classnames(['...', '...'])}&gt;
    Children
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classnames</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'...'</span><span class="pl-kos">,</span> <span class="pl-s">'...'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    Children
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This seems simple, but when you have more elements that need dynamic classes, it gets tedious and pretty hard to read. I propose the following thing:</p>
<p dir="auto">When <code class="notranslate">className</code> attribute is evaluated, how about running it through <a href="https://www.npmjs.com/package/classnames" rel="nofollow"><code class="notranslate">classnames</code></a> before rendering the HTML?</p>
<p dir="auto">This means that the <code class="notranslate">className</code> attribute should allow <code class="notranslate">Array&lt;string&gt;</code>, <code class="notranslate">{[string]: boolean}</code> and <code class="notranslate">string</code> types and would become much simpler to write code.</p>
<p dir="auto">What do you guys think?</p>