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

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

Posted by: admin November 30, 2017 Leave a comment

Questions:

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?

Answers:

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.

https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

Questions:
Answers:

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