How to fix Invalid DOM property `class` warning in React

Invalid DOM property 'class‘ warning in React appears when using the element’s attribute that is not in JSX format. This article will explain the warning’s reasons and the solutions in detail.

The reason for the error Invalid DOM property `class` warning in React

This error occurs when your React project realizes you are using the same class attribute in HTML instead of className in JSX, so the program will return this error so you can promptly fix it. The example below is where the program returns the error Invalid DOM property `class` warning in React.

Code:

import React from 'react';

const App = () => {
    return (
        <div>
            <div class="container">
                <h2>Invalid DOM property `class` warning in React</h2>
            </div>
        </div>
    );
};

export default App;

Output:

In the next section, there are a few ways to fix this with detailed code examples.

How to fix this error

React DOM uses the standard camelCase naming convention for properties rather than the native HTML property names because JSX is closer to JavaScript than HTML.

For example, the class becomes className in JSX, and tabindex becomes tabIndex.

Changing from class to className

In this way, we will follow the instructions of the error program. From the class attribute, you can replace it with the className attribute to match the JSX in React. Because in React, when you use the class attribute to set values ​​for the element’s classList, the program will detect this syntax error and notify us.

Code:

import React from 'react';

const App = () => {
    return (
        <div>
            <div className="container">
                <h2>Invalid DOM property `class` warning in React</h2>
            </div>
        </div>
    );
};

export default App;

Output:

When you change the attribute from class to className, the program will no longer give an error, and the element will also receive the classes you passed. Besides, you can follow the second way to fix this error.

Install react-html-attrs package

With this plugin, you can write HTML as usual, and the program can still convert it to JSX. You should use this plugin when copying a large HTML code containing many untransformed attributes such as class, for, …

You can install this package using the command:

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

After installing, you need to edit the project’s babel file like the code below.

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

After the installation, you can rerun the project, and the error will no longer appear. Good luck with how to fix the Invalid DOM property `class` warning in React mentioned in the article.

Summary

The article has shown us two solutions to fix the Invalid DOM property `class` warning in React. However, I recommend you use the changing from class to className method because this way will not require you to install any additional libraries.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs