In the MERN Amazona with Typescript I cannot render my placed orders in OrderHistoryPage.
I narrowed it down to mapping of orders even though we place a orders! my editor says:
Forbidden non-null assertion.eslint@typescript-eslint/no-non-null-assertion
const orders: Order[] | undefined
I checked my mongodb i have 6 orders that should be able to display.
{orders!.map((order) => (
<tr key={order._id}>
<td>{order._id}</td>
<td>{order.createdAt.substring(0, 10)}</td>
<td>{order.totalPrice.toFixed(2)}</td>
<td>{order.isPaid ? order.paidAt.substring(0, 10) : "No"}</td>
<td>
{order.isDelivered
? order.deliveredAt.substring(0, 10)
: "No"}
</td>
<td>
<Button
type="button"
variant="light"
onClick={() => {
navigate(`/order/${order._id}`);
}}
>
Details
</Button>
</td>
</tr>
))}
Anyone have any ideas?
OrderHistoryPage (OrderHistoryPage.tsx:39:22) points to where i am mapping orders.
SOLVED: turns out my DATE field where i have order.createdAt was blank for previous orders i placed testing out payment etc so one order had a createdAt date and could use substring(0,10) whereas all the others couldn’t use substring(0,10) so it therefore crashed. It was never about orders being undefined. The date time stamp createdAt is solved in the order model here:
@modelOptions({ schemaOptions: { timestamps: true } })
you can just use optional chaining operator:
orders?.map((order)
The rest of your code was corect
refactored it like so : {orders &&
orders.map((order) => (
{order._id}
{order.createdAt.substring(0, 10)}
{order.totalPrice.toFixed(2)}
{order.isPaid ? order.paidAt.substring(0, 10) : “No”}
{order.isDelivered
? order.deliveredAt.substring(0, 10)
: “No”}
{
navigate(`/order/${order._id}`);
}}
>
Details
))} and the type check error disapears but I still cannot render it as my console is still screaming at me : react_devtools_backend_compact.js:2367 React Router caught the following error during render TypeError: Cannot read properties of undefined (reading ‘substring’)
at OrderHistoryPage.tsx:42:40
at Array.map ()
at OrderHistoryPage (OrderHistoryPage.tsx:39:22)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at beginWork$1 (react-dom.development.js:27426:14)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
at renderRootSync (react-dom.development.js:26434:7) {componentStack: ‘n at OrderHistoryPage (http://127.0.0.1:5173/sr…ider (http://127.0.0.1:5173/src/Store.tsx:121:35)’}
at RenderErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-RTSYDA6A.js?v=38a99e4e:3601:9)
at DataRoutes (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-RTSYDA6A.js?v=38a99e4e:3322:5)
at Router (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-RTSYDA6A.js?v=38a99e4e:3394:15)
at RouterProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-RTSYDA6A.js?v=38a99e4e:3278:5)
at QueryClientProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-TZNWJLHN.js?v=38a99e4e:2812:3)
at r2 (http://127.0.0.1:5173/node_modules/.vite/deps/react-helmet-async.js?v=38a99e4e:386:21)
at PayPalScriptProvider (http://127.0.0.1:5173/node_modules/.vite/deps/@paypal_react-paypal-js.js?v=38a99e4e:600:15)
at StoreProvider (http://127.0.0.1:5173/src/Store.tsx:121:35)