React throws warnings about invalid DOM properties when you use HTML "class" instead of "className", or when inline styles use hyphenated CSS property names instead of camelCase. This error stems from JSX being JavaScript syntax where certain keywords are reserved.
This error actually encompasses two related warnings in React: 1. **"Invalid DOM property `class`. Did you mean `className`?"** - This occurs when you use the HTML `class` attribute in JSX instead of React's `className` prop. Since JSX is syntactic sugar for JavaScript and "class" is a reserved keyword in JavaScript (used for ES6 classes), React requires the `className` prop to avoid conflicts. 2. **"Unsupported style property [property-name]. Did you mean [camelCaseProperty]?"** - This warning appears when inline styles use hyphenated CSS property names (like "background-color" or "min-height") instead of camelCase versions (backgroundColor, minHeight). React's style attribute accepts a JavaScript object with camelCased properties rather than CSS strings. Both warnings indicate that you're using standard HTML/CSS syntax in JSX, which requires JavaScript-compatible naming conventions. React will still attempt to render the component, but these warnings signal incorrect usage that may cause unexpected behavior or fail in future React versions.
Search your codebase for class= usage in JSX files and replace with className=:
Before (incorrect):
<div class="container">
<button class="btn btn-primary">Click me</button>
</div>After (correct):
<div className="container">
<button className="btn btn-primary">Click me</button>
</div>For dynamic classes, use template literals or the classnames library:
// Template literal approach
<div className={`container ${isActive ? 'active' : ''}`}>
// Using classnames library
import classNames from 'classnames';
<div className={classNames('container', { active: isActive })}>Transform all hyphenated CSS properties in inline styles to camelCase JavaScript syntax:
Before (incorrect):
<div style={{ background-color: '#fff', font-size: '16px', min-height: '100px' }}>
Content
</div>After (correct):
<div style={{ backgroundColor: '#fff', fontSize: '16px', minHeight: '100px' }}>
Content
</div>Common conversions:
- background-color → backgroundColor
- font-size → fontSize
- border-radius → borderRadius
- z-index → zIndex
- margin-top → marginTop
Replace other HTML attributes that conflict with JavaScript reserved words:
Label elements - for → htmlFor:
// Before
<label for="username">Username</label>
// After
<label htmlFor="username">Username</label>Other common conversions:
- tabindex → tabIndex
- readonly → readOnly
- maxlength → maxLength
- cellspacing → cellSpacing
- colspan → colSpan
Install and configure eslint-plugin-react to automatically detect invalid DOM properties:
npm install --save-dev eslint-plugin-reactAdd to your .eslintrc.json:
{
"extends": ["plugin:react/recommended"],
"rules": {
"react/no-unknown-property": "error"
}
}This rule will flag usage of class, for, and other invalid DOM properties in JSX, catching errors during development before they reach the browser.
TypeScript will catch invalid prop names at compile time if you use proper React types:
import React from 'react';
// TypeScript will error on 'class' prop
const MyComponent: React.FC = () => {
return <div class="container">Content</div>; // ❌ Type error
};
// Correct usage
const MyComponent: React.FC = () => {
return <div className="container">Content</div>; // ✅ Valid
};For inline styles, TypeScript enforces camelCase properties through the React.CSSProperties type:
const styles: React.CSSProperties = {
backgroundColor: '#fff', // ✅ Valid
'background-color': '#fff' // ❌ Type error
};If warnings persist after fixing your code, check if third-party libraries are passing invalid props:
// Some libraries might accept 'class' prop and need updating
<ThirdPartyComponent class="custom" /> // Check library docs
// Most modern libraries use className
<ThirdPartyComponent className="custom" />Check the library's documentation or GitHub issues. If the library passes class internally, consider:
- Updating to the latest version
- Filing an issue with the maintainers
- Using a wrapper component to intercept and convert props
- Switching to a more actively maintained alternative
Systematically find and fix all instances using grep or your editor's search:
VS Code search regex:
- Search for: class=["']
- Replace with: className=
Command line search:
# Find all files with class= in JSX
grep -r 'class=' src/ --include="*.jsx" --include="*.tsx"
# Find inline styles with hyphens
grep -r 'style={{[^}]*-[^}]*}}' src/ --include="*.jsx" --include="*.tsx"Bulk replacement with sed (backup first!):
# Replace class= with className= in all JSX files
find src -name "*.jsx" -o -name "*.tsx" | xargs sed -i 's/class=/className=/g'Vendor Prefixes: For vendor-prefixed CSS properties, React requires camelCase with the vendor prefix capitalized (except for -ms- which stays lowercase): WebkitTransform, MozTransition, msFlexbox.
CSS Variables: CSS custom properties (variables) are an exception - they retain their hyphenated format in inline styles: style={{ '--main-color': '#0066cc' }}.
CSS-in-JS Libraries: Libraries like styled-components, Emotion, or Tailwind CSS handle this conversion automatically. If you're using CSS-in-JS, you can use standard CSS syntax within styled template literals.
React Native Differences: React Native components use style prop exclusively (no className) and requires all properties in camelCase, but may support different CSS properties than React DOM.
SVG Attributes: SVG elements in React also require camelCase for multi-word attributes: strokeWidth, fillOpacity, viewBox (note: viewBox has lowercase 'v' but uppercase 'B').
Prevention Strategy: Set up pre-commit hooks with ESLint to catch these issues before they're committed. Use Prettier with React-specific formatting rules to automatically convert attributes during code formatting.
React.FC expects children prop to be defined
React.FC no longer includes implicit children prop
Warning: You provided a `selected` prop to a form field without an `onChange` handler
You provided a 'selected' prop without an onChange handler
Failed to load source map from suspense chunk
How to fix "Failed to load source map from suspense chunk" in React
Prop spreading could cause security issues
Prop spreading could cause security issues
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency