Invalid DOM Property
The code uses an incorrect HTML attribute or React-specific prop on a DOM element.
Explanation
Invalid DOM Property occurs in React when you use an incorrect property name on a DOM element. React has specific naming conventions that differ from HTML. For example, HTML uses class but React uses className, HTML uses for but React uses htmlFor, and HTML attributes with dashes (data-testid) are used as-is. This warning means React encountered an unrecognized property and will try to use it as-is, but it may not work correctly.
Common Causes
- Using HTML attribute names instead of React
- Wrong casing for event handlers
- Using class instead of className
- Using for instead of htmlFor
- Wrong casing for form attributes
Solution
Use React's camelCase convention for DOM properties: className instead of class, htmlFor instead of for, tabIndex instead of tabindex. Use camelCase for event handlers: onClick, onChange, onSubmit. For custom data attributes, use the data-* pattern which is passed through as-is. Check the React documentation for the correct property names. Use TypeScript with React types to catch these errors at compile time. Common mistakes include onclick vs onClick, onchange vs onChange, and readonly vs readOnly.
Code Example
// Invalid: uses HTML convention
<div class="container"> // Warning: Invalid DOM property 'class'
<input readonly /> // Warning: Invalid DOM property 'readonly'
<label for="email">Email</label> // Warning: Invalid DOM property 'for'
// Fix: use React convention
<div className="container">
<input readOnly />
<label htmlFor="email">Email</label>
// Event handlers must be camelCase
<button onclick={handleClick}>Click</button> // Warning!
<button onClick={handleClick}>Click</button> // Correct!
// Custom data attributes are fine as-is
<div data-testid="user-card">...</div>
<div data-tooltip="Help text">...</div>
// Common mistakes:
// onclick -> onClick
// onchange -> onChange
// onsubmit -> onSubmit
// tabindex -> tabIndex
// maxlength -> maxLength
// readonly -> readOnlyError Information
Language
javascript
Framework
react
Difficulty
Beginner
Views
12
Related Errors
Frontend
Invalid CSS Property
The code sets a CSS property that doesn't exist or uses incorrect syntax.
Frontend
CORS Error
The browser blocks cross-origin requests due to same-origin policy restrictions.
ERESOLVE
JavaScript
npm ERESOLVE Unable to Resolve Dependency Tree
npm cannot install a package due to conflicting dependency requirements.
Frontend
ResizeObserver Loop Limit Exceeded
A ResizeObserver callback triggered layout changes that caused another resize, creating an infinite loop.