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

- **ID:** `react/invalid-dom-prop-class`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 100%

## Root Cause

Using the HTML attribute `class` instead of the JSX attribute `className` in a React component, which React interprets as an unknown DOM property.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.0.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## Workarounds

1. **Replace all occurrences of `class` with `className` in JSX elements: `<div className="my-class">Content</div>`** (100% success)
   ```
   Replace all occurrences of `class` with `className` in JSX elements: `<div className="my-class">Content</div>`
   ```
2. **If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically.** (80% success)
   ```
   If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically.
   ```

## Dead Ends

- **** — This is not a fix for the error; the error only occurs when `class` is used instead of `className`. (10% fail)
- **** — This addresses a different issue (label's `for` attribute) but does not fix the `class` -> `className` problem. (20% fail)
- **** — The error is specifically about the `class` property; using `data-class` or similar avoids the warning but does not apply CSS classes. (30% fail)