React Review Audit

[react-doctor]

❌ 9 errors, ⚠️ 17 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Errors (9)

1. [error] alt-text — src/Components/Checkout/Checkout.js:18
   Missing `alt` attribute.

2. [error] alt-text — src/Components/Product/Product.js:69
   Missing `alt` attribute.

3. [error] alt-text — src/Components/Header/Header.js:37
   Missing `alt` attribute.

4. [error] alt-text — src/Components/Login/Login.js:68
   Missing `alt` attribute.

5. [error] jsx-key — src/Components/Orders/Orders.js:60
   Missing "key" prop for element in iterator.

6. [error] alt-text — src/Components/ProductView/ProductView.js:124
   Missing `alt` attribute.

7. [error] alt-text — src/Components/ProductView/ProductView.js:131
   Missing `alt` attribute.

8. [error] alt-text — src/Components/ProductView/ProductView.js:138
   Missing `alt` attribute.

9. [error] alt-text — src/Components/ProductView/ProductView.js:145
   Missing `alt` attribute.

## Warnings (17)

10. [warning] rendering-hydration-mismatch-time — src/Components/Checkout/Checkout.js:28
   Date.now() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

11. [warning] no-array-index-as-key — src/Components/Product/Product.js:63
   Array index "i" used as key — causes bugs when list is reordered or filtered

12. [warning] prefer-useReducer — src/Components/Payment/Payment.js:12
   Component "Payment" has 5 useState calls — consider useReducer for related state

13. [warning] rerender-state-only-in-handlers — src/Components/Payment/Payment.js:23
   useState "clientSecret" is updated but never read in the component's return — use useRef so updates don't trigger re-renders

14. [warning] rendering-hydration-mismatch-time — src/Components/Payment/Payment.js:117
   Date.now() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

15. [warning] no-generic-handler-names — src/Components/Payment/Payment.js:135
   Non-descriptive handler name "handleChange" — name should describe what it does, not when it runs

16. [warning] click-events-have-key-events — src/Components/Header/Header.js:71
   Enforce a clickable non-interactive element has at least one keyboard event listener.

17. [warning] click-events-have-key-events — src/Components/Header/Header.js:82
   Enforce a clickable non-interactive element has at least one keyboard event listener.

18. [warning] no-static-element-interactions — src/Components/Header/Header.js:71
   Static HTML elements with event handlers require a role.

19. [warning] no-static-element-interactions — src/Components/Header/Header.js:82
   Static HTML elements with event handlers require a role.

20. [warning] no-autofocus — src/Components/CustomPopup/CustomPopup.js:35
   The `autoFocus` attribute is found here, which can cause usability issues for sighted and non-sighted users.

21. [warning] design-no-vague-button-label — src/Components/CustomPopup/CustomPopup.js:35
   Vague button label "OK!!!" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens

22. [warning] no-array-index-as-key — src/Components/ProductView/ProductView.js:118
   Array index "i" used as key — causes bugs when list is reordered or filtered

23. [warning] js-combine-iterations — src/Components/ProductRow/ProductRow.js:13
   .filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of

24. [warning] no-array-index-as-key — src/Components/CheckoutProduct/CheckoutProduct.js:41
   Array index "i" used as key — causes bugs when list is reordered or filtered

25. [warning] no-moment — src/Components/Order/Order.js:5
   moment.js is 300kb+ — use "date-fns" or "dayjs" instead

26. [warning] no-fetch-in-effect — src/App.js:25
   fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component

---

❌ Errors (9)

Missing `alt` attribute. _{· 8 in 5 files}

_alt-text

Must have alt prop, either with meaningful text, or an empty string for decorative images.

File	Lines
src/Components/ProductView/ProductView.js	124, 131, 138, 145
src/Components/Checkout/Checkout.js	18
src/Components/Product/Product.js	69
src/Components/Header/Header.js	37
src/Components/Login/Login.js	68

Missing "key" prop for element in iterator. _{· 1 in 1 file}

_jsx-key

Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

File	Lines
src/Components/Orders/Orders.js	60

---

⚠️ Warnings (17)

Array index "i" used as key — causes bugs when list is reordered or filtered _{· 3 in 3 files}

_{no-array-index-as-key}

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

File	Lines
src/Components/Product/Product.js	63
src/Components/ProductView/ProductView.js	118
src/Components/CheckoutProduct/CheckoutProduct.js	41

Date.now() reachable from JSX renders differently on server vs client — wrap in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional _{· 2 in 2 files}

_{rendering-hydration-mismatch-time}

Wrap dynamic time/random values in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

File	Lines
src/Components/Checkout/Checkout.js	28
src/Components/Payment/Payment.js	117

Enforce a clickable non-interactive element has at least one keyboard event listener. _{· 2 in 1 file}

_{click-events-have-key-events}

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

File	Lines
src/Components/Header/Header.js	71, 82

Static HTML elements with event handlers require a role. _{· 2 in 1 file}

_{no-static-element-interactions}

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

File	Lines
src/Components/Header/Header.js	71, 82

Component "Payment" has 5 useState calls — consider useReducer for related state _{· 1 in 1 file}

_{prefer-useReducer}

Group related state: const [state, dispatch] = useReducer(reducer, { field1, field2, ... })

File	Lines
src/Components/Payment/Payment.js	12

useState "clientSecret" is updated but never read in the component's return — use useRef so updates don't trigger re-renders _{· 1 in 1 file}

_{rerender-state-only-in-handlers}

Replace useState with useRef when the value is only mutated and never read in render — ref.current = ... updates without re-rendering the component

File	Lines
src/Components/Payment/Payment.js	23

Non-descriptive handler name "handleChange" — name should describe what it does, not when it runs _{· 1 in 1 file}

_{no-generic-handler-names}

Rename to describe the action: e.g. handleSubmit → saveUserProfile, handleClick → toggleSidebar

File	Lines
src/Components/Payment/Payment.js	135

The `autoFocus` attribute is found here, which can cause usability issues for sighted and non-sighted users. _{· 1 in 1 file}

_no-autofocus

Remove the autoFocus attribute.

File	Lines
src/Components/CustomPopup/CustomPopup.js	35

Vague button label "OK!!!" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens _{· 1 in 1 file}

_{design-no-vague-button-label}

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

File	Lines
src/Components/CustomPopup/CustomPopup.js	35

.filter().map() iterates the array twice — combine into a single loop with .reduce() or for...of _{· 1 in 1 file}

_{js-combine-iterations}

Combine .map().filter() (or similar chains) into a single pass with .reduce() or a for...of loop to avoid iterating the array twice

File	Lines
src/Components/ProductRow/ProductRow.js	13

moment.js is 300kb+ — use "date-fns" or "dayjs" instead _{· 1 in 1 file}

_no-moment

Replace with import { format } from 'date-fns' (tree-shakeable) or import dayjs from 'dayjs' (2kb)

File	Lines
src/Components/Order/Order.js	5

fetch() inside useEffect — use a data fetching library (react-query, SWR) or server component _{· 1 in 1 file}

_{no-fetch-in-effect}

Use useQuery() from @tanstack/react-query, useSWR(), or fetch in a Server Component instead

File	Lines
src/App.js	25

---

^{Reviewed by reactreview for commit 034b2ac. Configure here.}