How to fix Warning: Invalid property name (e.g., 'for', 'class') in React

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 104 views

React requires camelCase property names for HTML attributes that are also JavaScript reserved words. Using "class" or "for" directly in JSX will trigger a warning because "class" is used for ES6 class declarations and "for" is used in loop statements.

Quick fix

Fixes Warning: Invalid property name (e.g., 'for', 'class')

<div class="container">
  <p class="text-blue">Hello World</p>
</div>
  1. Replace class with className
  2. Replace for with htmlFor
  3. Verify other camelCase attributes
  4. Use a TypeScript or linting tool to catch these issues
react — error
<div class="container">
  <p class="text-blue">Hello World</p>
</div>
Warning: Invalid property name (e.g., 'for', 'class')

What this error means

In JSX, certain HTML attributes conflict with JavaScript reserved keywords. "class" is a reserved word in JavaScript because it is used to define ES6 classes, and "for" is reserved because it is used in for loops and for...in statements. React prevents using these reserved words as JSX properties to avoid syntax conflicts. Instead, React uses camelCase alternatives: "className" for the HTML "class" attribute and "htmlFor" for the HTML "for" attribute. These properties are automatically converted back to their HTML equivalents when React renders to the DOM.

Typical symptoms

  • Browser console shows "Warning: Invalid DOM property..." when using "class" or "for"
  • Styles do not apply when using class instead of className
  • Form labels do not associate with inputs when using for instead of htmlFor
  • Linter or IDE shows errors on reserved property names in JSX elements

Common causes

  1. Using HTML "class" attribute directly instead of the React "className" property
  2. Using HTML "for" attribute directly instead of the React "htmlFor" property
  3. Migrating HTML code to React without converting attribute names to camelCase
  4. Unfamiliarity with JSX syntax differences from standard HTML
  5. Copying HTML templates directly into JSX components without adjustments

How to fix "Warning: Invalid property name (e.g., 'for', 'class')"

1Replace class with className

In JSX, you must use the className property instead of the HTML class attribute. This is because class is a reserved keyword in JavaScript used for ES6 class declarations.

Before:

jsx
<div class="container">
  <p class="text-blue">Hello World</p>
</div>

After:

jsx
<div className="container">
  <p className="text-blue">Hello World</p>
</div>

When React renders this to the DOM, the className property is automatically converted back to the class attribute in the final HTML, so browsers will correctly apply CSS styles.

2Replace for with htmlFor

For form labels that associate with input elements, use htmlFor instead of the HTML for attribute. This is because for is a reserved keyword in JavaScript used for loop statements.

Before:

jsx
<label for="username">Username:</label>
<input id="username" type="text" />

After:

jsx
<label htmlFor="username">Username:</label>
<input id="username" type="text" />

The htmlFor property tells React to associate the label with the input element by matching the id. When rendered to the DOM, React converts htmlFor to the standard HTML for attribute.

3Verify other camelCase attributes

React requires camelCase naming for many HTML attributes, not just "class" and "for". Review your JSX code for other common attribute naming issues:

- tabindex → tabIndex
- autocomplete → autoComplete
- onclick → onClick
- onchange → onChange
- readonly → readOnly
- disabled → disabled (already camelCase)
- accept-charset → acceptCharset
- max-length → maxLength

React's linter or IDE will typically warn you about these automatically, so check your development console for any additional warnings after fixing "class" and "for".

4Use a TypeScript or linting tool to catch these issues

Enable React and TypeScript linting rules to catch reserved property names before runtime:

For TypeScript:
Enable strict JSX checking in your tsconfig.json:

json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true
  }
}

For ESLint:
Install the React plugin and enable it:

bash
npm install --save-dev eslint-plugin-react

Add to your .eslintrc.json:

json
{
  "extends": ["plugin:react/recommended"],
  "rules": {
    "react/no-unescaped-entities": "warn"
  }
}

These tools will highlight invalid property names in your IDE as you type, preventing the warning from appearing in the browser console.

Advanced notes

The reason React uses camelCase naming conventions stems from the way JSX is transpiled to JavaScript. When Babel or TypeScript compiles JSX to JavaScript, properties must be valid JavaScript identifiers. Since "class" and "for" are JavaScript reserved words, they cannot be used as property names in object literals without causing syntax errors. React chose camelCase conventions (className, htmlFor) as the JSX standard, which maps cleanly to the underlying HTML attributes at render time. The same principle applies to other HTML attributes like tabindex (tabIndex), onclick (onClick), etc. When React renders components, it automatically converts these camelCase properties to their lowercase HTML equivalents for the DOM, so the final HTML output is valid and follows HTML standards.

Frequently asked questions

What does "Warning: Invalid property name (e.g., 'for', 'class')" mean?
In JSX, certain HTML attributes conflict with JavaScript reserved keywords. in statements. React prevents using these reserved words as JSX properties to avoid syntax conflicts.
How do I fix "Warning: Invalid property name (e.g., 'for', 'class')"?
React requires camelCase property names for HTML attributes that are also JavaScript reserved words. Using "class" or "for" directly in JSX will trigger a warning because "class" is used for ES6 class declarations and "for" is used in loop statements.
What causes "Warning: Invalid property name (e.g., 'for', 'class')"?
Using HTML "class" attribute directly instead of the React "className" property Using HTML "for" attribute directly instead of the React "htmlFor" property Migrating HTML code to React without converting attribute names to camelCase
Is the "Warning: Invalid property name (e.g., 'for', 'class')" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading