React Review Audit

React Review Audit in firaslatrech/5dahr-react.

Open

Score: 94/100 · 1 error · 13 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] no-nested-component-definition — src/components/CardProduct/CardProduct.jsx:14
   Component "HandleNavigate" defined inside "CardProduct" — creates new instance every render, destroying state

## Warnings (13)

2. [warning] anchor-is-valid — src/components/Footer/Footer.jsx:67
   Use of incorrect `href` for the 'a' element.

3. [warning] anchor-is-valid — src/components/Footer/Footer.jsx:68
   Use of incorrect `href` for the 'a' element.

4. [warning] no-array-index-as-key — src/components/Footer/Footer.jsx:49
   Array index "index" used as key — causes bugs when list is reordered or filtered

5. [warning] no-array-index-as-key — src/components/Footer/Footer.jsx:60
   Array index "index" used as key — causes bugs when list is reordered or filtered

6. [warning] no-react19-deprecated-apis — src/Pages/ProfilePage/ProfilePage.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

7. [warning] no-react19-deprecated-apis — src/Pages/Login/Login.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

8. [warning] design-no-vague-button-label — src/Pages/Login/Login.jsx:84
   Vague button label "Submit" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens

9. [warning] no-react19-deprecated-apis — src/Pages/Home/Home.jsx:1
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

10. [warning] click-events-have-key-events — src/components/Header/Header.jsx:56
   Enforce a clickable non-interactive element has at least one keyboard event listener.

11. [warning] no-react19-deprecated-apis — src/components/Header/Header.jsx:9
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

12. [warning] click-events-have-key-events — src/components/Menu/Menu.jsx:7
   Enforce a clickable non-interactive element has at least one keyboard event listener.

13. [warning] no-static-element-interactions — src/components/Menu/Menu.jsx:7
   Static HTML elements with event handlers require a role.

14. [warning] no-react19-deprecated-apis — src/App.js:7
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

❌ Errors (1)

no-nested-component-definition

Component "HandleNavigate" defined inside "CardProduct" — creates new instance every render, destroying state

Move to a separate file or to module scope above the parent component

src/components/CardProduct/CardProduct.jsx:14

⚠️ Warnings (13)

no-react19-deprecated-apis

useContext is superseded by use() on React 19+ — use() reads context conditionally inside hooks, branches, and loops; switch to import { use } from 'react'

Pass ref as a regular prop on function components — forwardRef is no longer needed in React 19+. Replace useContext(X) with use(X) for branch-aware context reads. Only enabled on projects detected as React 19+.

src/Pages/ProfilePage/ProfilePage.jsx:1
src/Pages/Login/Login.jsx:1
src/Pages/Home/Home.jsx:1
src/components/Header/Header.jsx:9
src/App.js:7

anchor-is-valid

Use of incorrect href for the 'a' element.

Provide a correct href for the a element.

src/components/Footer/Footer.jsx:67
src/components/Footer/Footer.jsx:68

no-array-index-as-key

Array index "index" used as key — causes bugs when list is reordered or filtered

Use a stable unique identifier: key={item.id} or key={item.slug} — index keys break on reorder/filter

src/components/Footer/Footer.jsx:49
src/components/Footer/Footer.jsx:60

click-events-have-key-events

Enforce a clickable non-interactive element has at least one keyboard event listener.

Visible, non-interactive elements with click handlers must have one of keyup, keydown, or keypress listener.

src/components/Header/Header.jsx:56
src/components/Menu/Menu.jsx:7

design-no-vague-button-label

Vague button label "Submit" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens

Name the action: "Save changes" instead of "Continue", "Send invite" instead of "Submit", "Delete account" instead of "OK". The label IS the button's accessible name

src/Pages/Login/Login.jsx:84

no-static-element-interactions

Static HTML elements with event handlers require a role.

Add a role attribute to this element, or use a semantic HTML element instead.

src/components/Menu/Menu.jsx:7

_{Last scored May 14, 2026 at 7:35 AM UTC. Maintained by React Review.}

Activity

No activity yet.