Feature Request: className as object or array (vue-alike)

This issue has been created since 2022-09-13.

I would like to propose support for vue-alike classes, in which instead of accepting only string, it would also accept array or objects.

This support greatly improves code maintainability by avoiding the use of join functions. Also, production performance can be reduced to zero if the code is optimized for the current supported format.

Currently React only allows strings like className, so we can have something like:

<div className="active">

If we want something dynamic, we need to define something like:

const isActive = true;

<div className={ isActive ? 'active' : '' }>

But if we need more than one piece of information, things start to get complicated, but nothing absurd:

const isActive = false,
      isSortable = true;

<div className={ (isActive ? 'active' : '') + (isSortable ? '<space>sortable' : '') }>

A definition with more optional classes could make the code a little more complicated to handle. So allowing support for objects like vue allows greatly improves code quality:

const isActive = false,
      isSortable = true;

<div className={ { active: isActive, sortable: isSortable } }>

Even better, if the name of the class is the same as the name of the variable that stores it, we can reduce this even further:

const active = false,
      sortable = true;

<div className={ { active, sortable } }>

It is also possible to use arrays in various ways, for example by applying various classes as they exist in an array:

const fruits = [ 'banana', 'apple' ];

<div className={ fruits }>

I don't particularly use as above, however, it's common to merge arrays with objects like this:

<div className={ [ 'item', { active, sortable } ] }>

One or several functions can be used during the union:

const isActive = () => [ 'active ' ];
const isSortable= () => user.exists ? [ 'sortable' ] : null;

<div className={ [ 'item', isActive, isSortable ] }>
rentalhost wrote this answer on 2022-09-13

There are libs that do just that, but I'd really like this to be something native:
https://github.com/JedWatson/classnames

FrameMuse wrote this answer on 2022-09-16

I think this could be inappropriate for React itself, because it doesn't transform any passed values, so your example shows that React will transform [ 'item', { active, sortable } ] to "item active sortable".

The transformation needs to be applied in every render, when in most projects the classnames are already maintained by their on way.

You suggested the library that is doing just that, so why do you want this breaking change to be native, if there is already a nice existing solution?

Also, you could create your own React Component to do exactly this - this is what React magic is.

rentalhost wrote this answer on 2022-09-17

@FrameMuse I don't think it's a problem for React to transform data, as long as there isn't a regression to its original and raw functionality. Or, at least, if it were possible to implement a plugin that could perform this transformation "almost natively". But I understand that this can be part of the "React philosophy".

There is also no breaking change, as className can only take a string as a parameter currently. And the suggested functionality would only expand its capacity to support array and object.

I can't imagine how I could make a React Component that does this, I'm currently using the classnames lib (from my previous comment) and it works fine, on the other hand, I always need to remember to import it. Something like: className={classnames({ active, visible })}.

FrameMuse wrote this answer on 2022-09-17

@rentalhost Yes, I was talking about "React philosophy". After some rethinking, there is actually no breaking changes. If you don't want to care about importing anything manually, just use an extension for your IDE so it does that for you.

And this is how you can create your own "React Component" with className transforming.

interface DivProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className"> {
  className?: unknown[]
}

function Div(props: DivProps) {
  const className: string = YOUR_CLASSNAME_TRANSFORM(props.className)
  
  return (
    <div {...props} className={className} />
  )
}
More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-09-26
Star Count 195293
Watcher Count 6655
Fork Count 40426
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
if no header is present in the stopword file, assume first col is stopword 2 2022-04-21 2022-09-25
[Bug] /crypto/dd/load error handling when coin not found 2 2022-04-14 2022-07-30
Commit 3bfd728 breaks custom plots 2 2022-04-11 2022-09-04
Target and workflow to support updating the README 2 2021-07-16 2022-08-25
In the VR mode of MHR, the GPU and CPU usage is only 50%, and the fps is as low as 30~41fps. 1 2022-07-22 2022-09-09
Program closes upon starting of REFramework 1 2022-07-10 2022-09-09
Initialization Failed: Exception Thrown 5 2022-07-19 2022-09-09
.dynsym not sorted by symbol visibility when using sysv hash style 1 2021-05-27 2022-03-14
Big blue LOADING.... with modules and appendTab/removeTab 7 2021-06-22 2022-09-27
请问大佬,如果想使用多个二级域名,nginx应该如何设置 1 2021-01-30 2022-07-21
Compiling bsc in MAC-OS-10 : no such file or directory: '/libgmp.a' 5 2021-08-28 2022-08-19
[css] 第902天 请描述下grid布局中minmax函数有什么作用? 1 2021-10-03 2022-07-19
How to update xySeries, if values come from another thread 5 2021-07-11 2022-07-19
Support for empty data points 11 2021-08-27 2022-08-12
linux 上fcitx不生成default.custom.yaml 2 2020-10-30 2022-09-19
tests: functests should not refer to xml 3 2022-02-10 2022-09-04
Wrong URL to Pfam-A.hmm.gz 3 2020-06-11 2022-09-22
Love it; can we hide the /codes?! Let the ANSI live!! 2 2021-07-01 2022-08-17
Whether this type of chart is supported 2 2021-12-08 2022-09-16
yuzu keeps crashing 12 2022-01-23 2022-08-10
Problem with widgets in WordPress 5.9 1 2022-02-02 2022-08-21
vulkaninfo throws a warning 10 2022-01-30 2022-09-19
Typo in the docs for `vkCmdSetScissor` 0 2021-10-10 2022-09-24
using CStructureType = ${vkName}; 1 2021-08-19 2022-09-13
test_pytorch_integration.py::test_pytorch[False-False] is incompatible with PyTorch >=1.7 0 2022-03-31 2022-09-16
HTML support? 2 2021-08-24 2022-01-13
[Package]: Zerotier-One 2 2021-12-30 2022-04-06
Improve incorrect Peer Url Error 1 2022-07-28 2022-09-14
Consolidate static/dynamic symbol table logic with `elf-edit` 0 2022-04-05 2022-09-15
Make a test case for #477 0 2022-03-31 2022-09-20
Cache is not updated in StaleWhileRevalidate 2 2021-11-22 2022-09-27
左上角定义的 outbound 如何在 RoutingA 中使用? 8 2022-03-09 2022-09-21
docker: entrypoint fails if group exists 7 2021-06-28 2022-09-05
PDL::Graphics::Gnuplot etc demos 2 2021-08-01 2022-08-19
Scan SBOM attestation 2 2022-07-28 2022-09-05
Error: Unknown adapter: "poppler" 0 2021-06-13 2022-09-15
`guard` does not recognize `else` 2 2021-07-17 2022-09-16
Printing style for bytevectors should be consistent with reader syntax 0 2016-06-12 2022-09-16
When following the QuickStart examples, I get error with Gradle 1 2022-03-03 2022-09-18
v1.2/requests/current gives 404 error code only for India location 1 2020-10-01 2022-09-17
"Unknown command: 'search_index'" While provisioning using devstack OPENEDX_RELEASE=koa 2 2021-01-12 2022-09-05
Publishing tables fails 2 2020-10-15 2022-09-19
Exercise in `vmap` notebook on message passing is actually an example 0 2021-07-13 2022-07-28
The wazuh-certs-tool.sh script should allow the creation of certificates in existing folders 1 2022-08-25 2022-09-14
Bump junit from 4.13 to 4.13.1 in /mapstore/mapstore-sample-hazelcast3-mongodb 0 2020-11-11 2022-08-20
Bump path-parse from 1.0.6 to 1.0.7 in /02-orquestacion/exercises/00-monolith-in-mem/todo-app/frontend 0 2021-08-12 2021-10-25
docker run get the error message ( Registered email required (-m option).) 3 2022-06-22 2022-09-04
Question about javaagent and attach 1 2022-07-19 2022-09-13
Time out issue happening while preforming scan in azure redis cache. 0 2021-02-04 2022-09-25
Add note about proxy settings to the README.md 4 2015-02-17 2022-09-25