How to fix Invalid attribute name: `%s` in React

ReactINTERMEDIATEMEDIUMUpdated Dec 8, 2025· 126 views

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.

Quick fix

Fixes Invalid attribute name: `%s`

Warning: Invalid attribute name: `'data-name'`
  1. Identify the invalid attribute from the warning message
  2. Locate the component rendering the invalid attribute
  3. Fix attribute naming for standard HTML attributes
  4. Ensure data-* and aria-* attributes use lowercase
react — error
Warning: Invalid attribute name: `'data-name'`
Invalid attribute name: `%s`

What this error means

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.

Typical symptoms

  • Console warning shows "Invalid attribute name:" followed by the problematic attribute name
  • Attribute does not appear in the rendered HTML when inspecting the DOM
  • Component renders correctly otherwise but warning appears in development mode
  • Warning occurs when passing props with special characters or quotes to DOM elements
  • Build tools or linters may flag the invalid attribute in development
  • Warning appears after upgrading from older React versions that were more permissive
  • SVG elements throw warnings when using incorrect attribute name formats

Common causes

  1. Using quoted strings as attribute names, like data-name='value' being interpreted as attribute name 'data-name' with quotes
  2. Passing props with spaces or special characters to native DOM elements instead of custom components
  3. Using incorrect casing for HTML attributes, such as TabIndex instead of tabIndex
  4. SVG attributes from external sources or libraries using non-standard naming conventions
  5. Babel plugins or transforms incorrectly processing JSX and generating malformed attribute names
  6. Spreading objects with invalid property names directly onto DOM elements
  7. Using template literals or expressions that evaluate to invalid attribute names
  8. Third-party component libraries passing through invalid props to underlying DOM elements

How to fix "Invalid attribute name: `%s`"

1Identify the invalid attribute from the warning message

Check your browser console for the full warning message. React will tell you exactly which attribute name is invalid:

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

2Locate the component rendering the invalid attribute

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:

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

3Fix attribute naming for standard HTML attributes

Ensure you're using the correct React/DOM property names for standard HTML attributes. Common fixes:

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

4Ensure data-* and aria-* attributes use lowercase

Custom data attributes and ARIA attributes must be lowercase with hyphens:

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

5Remove quotes or special characters from attribute names

If you see quotes in the error message, you're likely accidentally including them in the attribute name:

jsx
// 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).

6Filter invalid props when spreading objects

If you're spreading props from external sources onto DOM elements, filter out invalid attributes:

jsx
// 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} />;
}
7Check SVG attribute naming conventions

SVG elements have specific attribute naming rules in React. Use camelCase for most SVG attributes:

jsx
// 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>

Advanced notes

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:

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

Frequently asked questions

What does "Invalid attribute name: `%s`" mean?
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.
How do I fix "Invalid attribute name: `%s`"?
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.
What causes "Invalid attribute name: `%s`"?
Using quoted strings as attribute names, like data-name='value' being interpreted as attribute name 'data-name' with quotes Passing props with spaces or special characters to native DOM elements instead of custom components Using incorrect casing for HTML attributes, such as TabIndex instead of tabIndex
Is the "Invalid attribute name: `%s`" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading