React Review Audit

[react-doctor]

Score: 96/100 · 0 errors · 11 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Warnings (11)

1. [warning] no-unknown-property — src/components/Card.jsx:26
   Unknown property found

2. [warning] no-unknown-property — src/components/Card.jsx:31
   Unknown property found

3. [warning] no-unknown-property — src/components/Card.jsx:41
   Unknown property found

4. [warning] no-unknown-property — src/components/Card.jsx:46
   Unknown property found

5. [warning] no-unknown-property — src/components/Card.jsx:56
   Unknown property found

6. [warning] no-unknown-property — src/components/Card.jsx:61
   Unknown property found

7. [warning] design-no-redundant-size-axes — src/components/Card.jsx:8
   w-32 h-32 → use the shorthand size-32 (Tailwind v3.4+)

8. [warning] design-no-bold-heading — src/components/Card.jsx:12
   font-bold on <h2> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

9. [warning] design-no-space-on-flex-children — src/components/Card.jsx:21
   space-x-4 on a flex/grid parent — use gap-x-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

10. [warning] rendering-svg-precision — src/components/Card.jsx:63
   SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

11. [warning] no-react-dom-deprecated-apis — src/index.js:6
   ReactDOM.render is the legacy root API — switch to `import { createRoot } from 'react-dom/client'` and call `createRoot(container).render(...)` (REMOVED in React 19)

---

⚠️ Warnings (11)

no-unknown-property

Unknown property found

Use 'className' instead

src/components/Card.jsx:26
src/components/Card.jsx:31
src/components/Card.jsx:41
src/components/Card.jsx:46
src/components/Card.jsx:56
src/components/Card.jsx:61

design-no-redundant-size-axes

w-32 h-32 → use the shorthand size-32 (Tailwind v3.4+)

Collapse w-N h-N to size-N (Tailwind v3.4+) when both axes match

src/components/Card.jsx:8

design-no-bold-heading

font-bold on <h2> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

Use font-semibold (600) or font-medium (500) on headings — 700+ crushes letter counter shapes at display sizes

src/components/Card.jsx:12

design-no-space-on-flex-children

space-x-4 on a flex/grid parent — use gap-x-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

Use gap-* on the flex/grid parent. space-x-* / space-y-* produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL

src/components/Card.jsx:21

rendering-svg-precision

SVG d attribute uses 4+ decimal precision — truncate to 1–2 decimals to shrink markup with no visible difference

Truncate path/points/transform decimals to 1–2 digits — sub-pixel precision adds bytes with no visible difference

src/components/Card.jsx:63

no-react-dom-deprecated-apis

ReactDOM.render is the legacy root API — switch to import { createRoot } from 'react-dom/client' and call createRoot(container).render(...) (REMOVED in React 19)

Switch the legacy react-dom root API (render / hydrate / unmountComponentAtNode) to createRoot / hydrateRoot / root.unmount() from react-dom/client. Replace findDOMNode with a ref. The whole react-dom/test-utils entry point is removed in React 19 — use act from react and fireEvent / render from @testing-library/react. Only enabled on projects detected as React 18+.

src/index.js:6

---

_{Last scored May 13, 2026 at 7:32 PM UTC. Maintained by React Review.}