Suggestion: Set list for className

This issue has been created since 2022-11-04.

React version: all versions

The issue

We use heavy third party libraries to work with className.
This result in big code and downgrade performance

The current behavior

element.className allows only a string as value

The expected behavior

Accept a list of strings, null, undefined or false

<div className={['class1', 'class2 class3', null, undefined, 0, false]} />
// Should result
<div className="class1 class2 class3" />

So we can write code like this:

<div className= { condition ? 'classIfTrue' : null } />

<ComponentX className={ ['class1', condition ? 'class2' : 'class3', condition2 && 'class4' ] }
hasanbisha wrote this answer on 2022-11-11

For my opinion react should not give className utilities, it will distract focus from other things. I would be a liar if I said that i don't use third party libraries for this thing, but it's not a big matter. I would suggest clsx

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-12-10
Star Count 198882
Watcher Count 6638
Fork Count 41302
Issue Count 1120

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Let's use type hints! 2 2019-09-27 2022-12-02
Global: when the data is loading the "Hover in this zone" does not work 2 2022-02-11 2022-12-05
Improper parsing of nested character classes in prepared patterns 0 2021-12-07 2022-08-26
Password validation blocks creating users with read-only LDAP 0 2022-01-26 2022-10-20
Function missing? (limit-cost-by-workspace-name) 1 2022-09-20 2022-11-28
Some part of the UI shown even should be hidden... 0 2021-10-14 2022-09-21
Please make the androidx.core version able to set from a variable. 2 2021-09-02 2022-11-13
Failed to start docksal project after upgrade docker: No port specified: :/tcp<empty>. 3 2022-04-17 2022-12-02
bug: ios devices appear to receive macos links 2 2021-12-30 2022-10-05
Always lose focus in fullscreen mode 2 2022-02-08 2022-09-06
Dockerfile doesn't create a working build system 1 2021-01-08 2022-12-08
Can't load parcel-css on Ubuntu 20.04 LTS 11 2022-04-06 2022-10-30
Why is Antminer S9 rebooting solo 0 2021-03-26 2022-11-30
Feature request: Compress big video files before upload 0 2022-05-18 2022-11-12
Tusky Nightly Crashes When Using UnifiedPush 0 2022-05-18 2022-11-10
Linking Nav Terminal and a Docking Port with an interrupted wire still shows Dock button 3 2022-01-31 2022-10-09
Reserved HTML characters are not replaced by their corresponding entities in code blocks 3 2021-12-17 2022-11-25
value attribute set with jquery selector can't be changed via HtmlInput Element 3 2021-12-17 2022-12-08
Creation of super-communities in co-occurrence analysis 2 2021-06-11 2022-04-05
jfrog downloads broken 13 2022-05-11 2022-10-29
[Vote ended on 2022-01-11] Repository instead of Changes impacting collection contributors & maintainers Issue 53 2021-10-21 2022-11-16
Add support for "source-only" comments 0 2021-10-29 2022-11-03
Upgrading from 5.1.2 to 5.2.2 3 2022-01-14 2022-12-02
Personalize donate buttons 0 2021-02-16 2022-11-13
Model for working with multi-languages 4 2021-10-27 2022-09-27
Feat: Events view 0 2021-07-26 2021-11-17
Custom data training 3 2021-12-01 2022-12-08
WhatsApp Web Multi-device (non beta) 4 2022-03-10 2022-12-06
Consider not deleting `Incentive` on endIncentive 1 2021-06-02 2022-10-05
Freeze when download 3 2021-07-01 2022-12-06
[BUG] Cannot find ".//ul[contains(@id, \"tablist\")]" on the Account form 0 2022-09-22 2022-12-02
This repo is missing important files 2 2022-08-17 2022-12-02
[HOW-TO] <Switch to other subgrid inside My Dashboard> 0 2022-09-22 2022-12-02
cv::VideoCapture - time value obtained on some frames at the end of the video is always 0 4 2022-06-21 2022-10-23
Add details about when an expiration date is updated during autorenewal 1 2022-10-25 2022-11-20
The revocation table is confusing 2 2022-07-19 2022-08-22
Audit Docker publish workflow 2 2021-09-23 2022-11-05
Support for Startup Probes via XML/DSL configuration 1 2022-03-02 2022-11-10
Allow any application modifications only during the sync window 2 2022-08-12 2022-09-23
Support topic remaps in `ros2 bag convert` YAML 3 2022-06-20 2022-10-16
Kpt beta 20 docker image fails to run 3 2022-09-01 2022-12-09
Using MSVC for Windows systems 0 2022-02-22 2022-11-22
Static HTML Export 3 2020-10-18 2022-01-16
More info about custom classess 4 2018-04-26 2022-07-23
Unable to save sparse model checkpoint 0 2022-09-06 2022-12-01
Docs theme doesn't match system preference 0 2022-10-06 2022-11-25
Learned this in 5 minutes from Primer 0 2022-05-28 2022-06-16
[Feature Request] Add support for OnePlus devices 6 2020-01-30 2022-08-22
[OLD] redirect to odoo/design-themes-old#463 0 2021-07-29 2022-11-18
Package breaks ie11 2 2021-08-27 2022-01-16