class vs className in React 16

Question

I saw that React 16 allows for attributes to be passed through to the DOM. So, that means \'class\' can be used instead of className, right?

I\'m just wondering if

Answer 1

Class versus className in reactJS Class is a reserved word or keyword in reactJS as much as function is in the javascript. That is why we use the word "className" to refer to the class.

Answer 2

In ReactJS, we are dealing with JSX and not HTML as you all know. The JSX wants you to use className because it is an underlying javascript DOM API! class being a reserved keyword in JS is not the primary reason why we are not using class and instead, using className. It is because we are referring to that DOM API

Answer 3

React docs recommend on using cannonical React attribute names rather than the conventional Javascript naming, so even when React allows attributes to be passed through to DOM, it will give you a warning.

From the docs:

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.

Answer 4

Just to shed a little more light, on top of the other good answers already given:

You'll notice that React uses className instead of the traditional DOM class. From the docs, "Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively."

http://buildwithreact.com/tutorial/jsx

Also, to quote zpao (a React contributor / facebook employee)

Our DOM components use (mostly) the JS API so we opted to use the JS properties (node.className, not node.class).

Answer 5

as of june 2019, the process of changing className to class has been halted, it could be continued later

here is the post by facebook dev explain why

https://github.com/facebook/react/issues/13525

Answer 6

The React team actually going to switch to class instead of className in the upcoming future (source):

• className → class (#4331, see also #13525 (comment) below). This has been proposed countless times. We're already allowing passing class down to the DOM node in React 16. The confusion this is creating is not worth the syntax limitations it's trying to protect against.

Why switching and not supporting both?

If we support both without warnings, then the community will split over which one to use. Each component on npm that accepts a class prop will have to remember to forward both. If even one component in the middle doesn't play along and implements only one prop, the class gets lost — or you risk ending up with class and className at the bottom "disagreeing" with each other, with no way for React to resolve that conflict. So we think that would be worse than status quo, and want to avoid this.

So you should stay tuned.
I would still use className as long as this is what the API expects.