Extend className manipulation

[romulof]

Currently we're doing string manipulation outside React (Starring classnames) and it works perfectly, but after a while writing code, it feels a little verbose:

<div className={classnames({ ... })}> ... </div>

The prop className is a plain string because it's directly mapped to DOM Element property.

Let's not create a polymorphic Frankenstein here. Keep it as close to pure JS/DOM as possible. My suggestion is not about changing, but adding.

Since a long time ago (not for Microsoft), DOM Element has the classList method. It works greatly for direct manipulation, but it wouldn't fit JSX declarative syntax.

How about extending the components with a classMap prop, that would work pretty much like classnames, mapping class names keys to conditional values.

Upon rendering that component, React would merge classNames and classMap into a single string to be passed down the render as the good old plain string classNames.

Angular has something like this for a long time:

• class prop is a plain string;
• ngClass directive makes the magic.

[gaearon]

There was some past movement on this in #1198 but it hasn't reached consensus. Since this is an API change and it's been discussed many times in the past but has been shot down for different reasons, perhaps it would be better if you could create an RFC for it: https://github.com/reactjs/rfcs. Thanks!

[dani-corie]

This is actually quite interesting... Styles are handled very strictly by React, apparently building a virtualdom equivalent of the browser DOM's style data structure... In the browser DOM, classes are also a data structure, there's element.classList.add() and element.classList.remove()...

Since React seems to mirror the DOM, why isn't classList added as a property on html elements?

[TrySound]

@daniel-jozsef It mirrors className property of element.

[dani-corie]

@TrySound I'm aware of that, just saying that maybe adding classList as an alternative route to set classes might be a nice option, that's in keeping with React's philosophy on virtual DOM design, maintains backwards compatibility, AND is comfortable and clean to use, quite unlike className.