To fix the React. js warning "Invalid DOM property class . Did you mean className ", use the className prop instead of class on your tags. The className prop is used because class is a reserved word in JavaScript.
className. To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div> , <a> , and others. If you use React with Web Components (which is uncommon), use the class attribute instead.
React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In class-based components, the htmlFor attribute is used to get the HTML for the given HTML elements.
Yes, its a React convention:
Since JSX is JavaScript, identifiers such as
class
andfor
are discouraged as XML attribute names. Instead, React DOM components expect DOM property names likeclassName
andhtmlFor
, respectively.
JSX In Depth.
In React.js there is no for and class properties available so we need to use
for --> htmlFor
class --> className
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
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"
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.
In react 16.13.1 you can use class attribute. It throws a "warning" exception but it don'T stop the execution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With