This warning appears when React encounters an attribute name that violates HTML/DOM naming conventions, such as attributes with special characters, incorrect casing, or malformed names that cannot be rendered to the DOM.
The "Invalid attribute name" warning occurs when React tries to render a DOM element with an attribute name that does not conform to HTML attribute naming standards. React validates attribute names before passing them to the DOM to ensure they are valid HTML attributes. This validation catches issues like attributes with quotes, spaces, special characters (except hyphens in data-* and aria-* attributes), or incorrect capitalization that would cause the browser to reject or misinterpret the attribute. This warning is part of React's DOM validation system introduced in React 16, which became stricter about attribute handling. While React 16+ passes most unknown attributes through to the DOM, it still validates that attribute names themselves are syntactically valid. The warning typically indicates that you're either incorrectly formatting a custom attribute, using the wrong casing for a standard HTML attribute, or accidentally passing an invalid prop name to a DOM element.
Check your browser console for the full warning message. React will tell you exactly which attribute name is invalid:
Warning: Invalid attribute name: `'data-name'`Note the attribute name shown between the backticks. Look for quotes, spaces, or unusual characters that shouldn't be there.
Use React DevTools to find which component is rendering the problematic attribute. The warning should include a component stack trace. Search your codebase for where this attribute is being set:
# Search for the attribute name in your source files
grep -r "data-name" src/Look for JSX elements where this attribute is applied, especially on native HTML elements like <div>, <span>, or <svg>.
Ensure you're using the correct React/DOM property names for standard HTML attributes. Common fixes:
// Wrong: Using HTML attribute names
<div class="container" tabindex="0" />
// Correct: Use React property names (camelCase)
<div className="container" tabIndex={0} />
// Wrong: Incorrect casing for event handlers
<button onclick={handleClick} />
// Correct: Use camelCase for event handlers
<button onClick={handleClick} />Refer to the React documentation for the correct property names. Most HTML attributes use camelCase in React.
Custom data attributes and ARIA attributes must be lowercase with hyphens:
// Wrong: Using camelCase for data attributes
<div dataTestId="my-element" />
// Correct: Use lowercase with hyphens
<div data-test-id="my-element" />
// Wrong: CamelCase ARIA attributes
<button ariaLabel="Close" />
// Correct: Lowercase with hyphens
<button aria-label="Close" />Note: Some libraries like React Testing Library provide their own props (e.g., data-testid) that may use different conventions.
If you see quotes in the error message, you're likely accidentally including them in the attribute name:
// Wrong: Quotes in attribute name (usually from string interpolation issues)
const attrs = { "\'data-name\'": "value" };
<div {...attrs} />
// Correct: Clean attribute names
const attrs = { "data-name": "value" };
<div {...attrs} />
// If using dynamic attribute names, validate them first
const attrName = "data-user-id"; // Not "\'data-user-id\'"
<div {...{ [attrName]: userId }} />Ensure attribute names contain only letters, numbers, and hyphens (for data-*/aria-* attributes).
If you're spreading props from external sources onto DOM elements, filter out invalid attributes:
// Wrong: Spreading all props to DOM element
function MyComponent(props) {
return <div {...props} />; // May include invalid attributes
}
// Correct: Extract known valid props
function MyComponent({ className, onClick, ...restProps }) {
const validDOMProps = {
className,
onClick,
// Only include valid HTML attributes
};
return <div {...validDOMProps} />;
}
// Or use a helper to filter DOM props
import { omit } from 'lodash';
function MyComponent(props) {
const domProps = omit(props, ['customProp', 'onCustomEvent']);
return <div {...domProps} />;
}SVG elements have specific attribute naming rules in React. Use camelCase for most SVG attributes:
// Wrong: Using hyphenated SVG attribute names
<svg>
<circle stroke-width="2" fill-opacity="0.5" />
</svg>
// Correct: Use camelCase for SVG attributes
<svg>
<circle strokeWidth={2} fillOpacity={0.5} />
</svg>
// Some attributes like xmlns remain lowercase
<svg xmlns="http://www.w3.org/2000/svg">
<text textAnchor="middle">Content</text>
</svg>In React 16+, the attribute handling system changed significantly from earlier versions. React now passes most unknown props through to the DOM rather than stripping them out, but it still validates attribute names for correctness. This is why you might see this warning after upgrading from React 15 or earlier.
If you're working with third-party libraries that inject SVG or HTML elements (like inline SVG Babel plugins), they may generate invalid attribute names during transformation. Check your Babel configuration and ensure plugins like babel-plugin-inline-react-svg are updated to versions that handle attribute naming correctly.
For TypeScript users, enabling strict type checking can help catch many of these issues at compile time. The @types/react package defines valid prop names for HTML and SVG elements, and TypeScript will flag invalid attribute names before runtime.
When building component libraries that wrap DOM elements, consider explicitly defining which props are valid DOM attributes versus component-specific props. This prevents accidentally passing invalid attributes through to the underlying DOM:
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary';
// variant won't be passed to DOM
}
function Button({ variant, className, ...domProps }: ButtonProps) {
const variantClass = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={`${className} ${variantClass}`} {...domProps} />;
}Some libraries provide utilities for filtering DOM props, such as @emotion/is-prop-valid or custom solutions that check against known HTML/SVG attribute lists.
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
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite