Invalid HTML attributes in JSX – Invalid DOM property ‘class’. Did you mean ‘className’?

The error “Invalid DOM property ‘class’. Did you mean ‘className’?” occurs when you’re trying to use the class attribute in JSX, which is incorrect in React. In JSX, you should use className instead of class because class is a reserved keyword in JavaScript.

Why This Happens:

In HTML, the class attribute is used to assign CSS classes to elements. However, JSX is based on JavaScript, and class is a reserved keyword in JavaScript (used for defining classes). Therefore, React uses className instead of class to avoid conflicts with the JavaScript keyword.

Steps to Resolve the Issue of Invalid HTML Attributes in JSX:

1. Replace class with className in JSX

When you are working with JSX, always use className to define classes for your elements.

Correct Example:

const MyComponent = () => {
  return <div className="my-class">Hello World</div>;
};

export default MyComponent;

In this example, className="my-class" is used to assign a CSS class to the <div> element. This is the correct way to assign classes in JSX.

2. Correct Usage in Functional Components

const MyComponent = () => {
  return (
    <div className="container">
      <h1>Welcome to React</h1>
    </div>
  );
};

export default MyComponent;

In this case, we used className="container" to apply the class in JSX.

3. Avoid Using class

If you mistakenly use class instead of className in JSX, React will throw a warning, and the class will not be applied to the element.

Incorrect Example (Using class):

const MyComponent = () => {
  return <div class="my-class">Hello World</div>; // Incorrect, will throw a warning
};

export default MyComponent;

In this example, React will display an error: “Invalid DOM property ‘class’. Did you mean ‘className’?”

4. Other Common Invalid HTML Attributes in JSX

In addition to class being replaced by className, there are a few other HTML attributes that are renamed in JSX:

• for → htmlFor (for form labels)
• style → style (but it’s an object, not a string)
• value and checked work like in regular HTML but can be controlled via React state

Summary

To resolve the “Invalid DOM property ‘class’. Did you mean ‘className’?” issue:

1. Always use className instead of class in JSX to assign CSS classes.
2. Ensure all attributes in JSX are React-compliant (e.g., htmlFor for labels, style as an object).

By following these practices, you can avoid errors related to invalid attributes in JSX and keep your React components working smoothly.