class vs className in React 16

Solution 1:

class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of class.

Nothing has changed in that regard.

To expand this a bit more. A keyword means that a token has a special meaning in a language syntax. For example in:

class MyClass extends React.Class {

Token class denotes that the next token is an identifier and what follows is a class declaration. See Javascript Keywords + Reserved Words.

The fact that a token is a keyword means that we cannot use it in some expressions, e.g.

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

One of the problems is that nobody can know whether some other problem won't arise in the future. Every programming language is still evolving and class can be actually used in some new conflicting syntax.

No such problems exist with className.

Solution 2:

Update (August 2020):

A comment by Dan Abramov on the same thread:

This was the most controversial part of the proposal. Since then, we released Hooks, which encourage writing function components. In function components, we generally suggest using destructuring for props, but you can't write { class, ... } because it would be a syntax error. So overall it's not clear that this is ergonomic enough to actually follow through with. I think it's plausible we'll revisit this in the future, or at least make class not warn and let people do what they want. But for now, we'll shelving this idea.

so, nope

(August 2018)

The React team is 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 switch and not support 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 recommend using className as long as this is what the API expects.

Solution 3:

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).

Solution 4:

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.

Solution 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