Warning: Unknown DOM property class. Did you mean className?

Question

I've just started exploring React, by adding a component with a simple render function:

render() {
  return <div class="myApp"></div>
}

When I run the app, I get the following error:

Warning: Unknown DOM property class. Did you mean className?

I can solve this by changing class to className.

The question is; does React enforce this convention? Also why do I need to use className instead of the conventional class? If this is a restriction then is it due to JSX syntax or somewhere else?

score 215 · Accepted Answer · edited Aug 17 '19 at 15:18

215

Yes, its a React convention:

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.

JSX In Depth.

edited Aug 17 '19 at 15:18

Edgar

6,022
8
33
66

answered Jun 21 '15 at 18:53

Viacheslav

3,876
2
21
28

42

I find this terribly unintuitive. I think the parser should know how to switch contexts between the two languages based on context, keep the burden off the programmer and on the tools – Jonathan Jan 29 '19 at 18:37
1

Agreed this should be in the tooling, though `class` is a reserved keyword in pretty much every programming language and its quite easy doing Find `class=`, Replace `className=` – Jeremy Thompson Jan 16 '22 at 11:39

score 23 · Answer 2 · answered Sep 29 '18 at 05:14

23

In React.js there is no for and class properties available so we need to use

for   --> htmlFor
class --> className

answered Sep 29 '18 at 05:14

KARTHIKEYAN.A

18,210
6
124
133

score 16 · Answer 3 · edited Aug 31 '16 at 15:15

16

Meteor uses babel to transpile ES5 to ES6 (ES2015), so we can deal with it as a normal Node application with babel transpiler added.

You need to add .babelrc file to your project's root folder, and add the following items

{
  "plugins": [
    "react-html-attrs"
  ]
}

And of course, you need to install this plugin using npm:

npm install --save-dev babel-plugin-react-html-attrs

edited Aug 31 '16 at 15:15

jsalonen

29,593
15
91
109

answered Jul 21 '16 at 22:22

securecurve

5,589
5
45
80

1

Thank you, I can fix "Invalid DOM" after install react-facebook-login. – Kakashi Feb 09 '18 at 09:14

score 12 · Answer 4 · answered Sep 01 '19 at 10:24

12

In HTML we use

class="navbar"

but in React and ReactNative there is no HTML, we use JSX(Javascript XML) here we use

className="navbar"

answered Sep 01 '19 at 10:24

Muhammad Talha

379
3
6

score 5 · Answer 5 · answered Jun 08 '18 at 06:02

5

You can't use class for any HTML tag attribute because JS has another meaning of class. That why you have to use className instead of class.

And also use htmlFor attribute instead of for.

answered Jun 08 '18 at 06:02

Nimmi Verma

465
6
11

score 4 · Answer 6 · answered Sep 30 '20 at 12:18

4

In react 16.13.1 you can use class attribute. It throws a "warning" exception but it don'T stop the execution.

answered Sep 30 '20 at 12:18

kodmanyagha

932
12
20

score 2 · Answer 7 · answered Jul 20 '20 at 04:30

The JSX syntax when compiled using babel, underlying syntax it will use to create the HTML element will be

   React.createElement('div', {attributes}, "Hello");

If we use the class instead of className, the react will infer it as javascript class instead of html class attribute. [Reason the variable name 'class' is already used in the file to create a javascript class and is reserved for the same purpose]. Which is wrong and compiler does throws the error, since javascript class is not a valid property for html DOM elements.

   React.createElement("p", {"class": "header"}, "Hello");

Hence it is necessary to use className instead of class.

   React.createElement("p", {"className": "header"}, "Hello")

Warning: Unknown DOM property class. Did you mean className?

7 Answers7

Linked

Related