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

Question

I just started learning React by adding a component with a simple rendering function:

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

When I run the application, 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 arises: Is this agreement responsive? Also why do I need to use className instead of the usual class ? If this is a limitation, is it due to JSX syntax or somewhere else?

Answer 1

Yes, this is a React convention:

Because JSX is JavaScript, identifiers such as class and for not recommended as XML attribute names. Instead, responsive DOM components expect DOM property names such as className and htmlFor , respectively.

JSX in depth .

Answer 2

Meteor uses babel to port ES5 to ES6 (ES2015), so we can deal with it like a normal Node application with the addition of babel transpiler.

You need to add the .babelrc file to the project 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

Answer 3

There are no for and class properties in React.js, so we need to use

 for --> htmlFor class --> className 

Answer 4

You cannot use a class for any attribute of an HTML tag because JS has a different class value. This is why you should use className instead of class.

And also use the htmlFor attribute instead of for.

Answer 5

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"