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

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:

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

After:

<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.

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:

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

After:

<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.

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".

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

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

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

For ESLint:
Install the React plugin and enable it:

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

Add to your .eslintrc.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.