react jsx_error ai_generated true

Warning: Invalid DOM property 'class'. Did you mean 'className'?

ID: react/invalid-dom-property

Also available as: JSON · Markdown
98%Fix Rate
95%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

HTML attributes in JSX use camelCase. class → className, for → htmlFor, etc.

generic

Workarounds

  1. 98% success Use React attribute names: className, htmlFor, tabIndex, readOnly, etc. 
    className, htmlFor, tabIndex, readOnly, etc

    Sources: https://react.dev/reference/react-dom/components/common#common-props

  2. 92% success Most HTML attributes are camelCase in JSX except data-* and aria-* 
    // data-* and aria-* keep their dashes:
<div data-testid="my-id" aria-label="Close" />
// All other attrs use camelCase:
<input autoComplete="off" maxLength={10} />

    Sources: https://react.dev/reference/react-dom/components/common

Dead Ends

Common approaches that don't work:

  1. Use dangerouslySetInnerHTML to bypass 90% fail

    Overkill and XSS risk for a simple attribute rename

Error Chain

Frequently confused with: