react runtime_error ai_generated true

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

ID: react/invalid-dom-prop-class

Also available as: JSON · Markdown · 中文
100%Fix Rate
90%Confidence
1Evidence
2023-01-20First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.0.0 active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

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.

generic

中文

在 React 组件中使用了 HTML 属性 `class` 而不是 JSX 属性 `className`，React 将其解释为未知的 DOM 属性。

Official Documentation

https://reactjs.org/docs/dom-elements.html#classname

Workarounds

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

中文步骤

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

Dead Ends

Common approaches that don't work:

  1. 10% fail

    This is not a fix for the error; the error only occurs when `class` is used instead of `className`.

  2. 20% fail

    This addresses a different issue (label's `for` attribute) but does not fix the `class` -> `className` problem.

  3. 30% fail

    The error is specifically about the `class` property; using `data-class` or similar avoids the warning but does not apply CSS classes.