NextUI Table example fails TypeError: Cannot read properties of undefined (reading 'key')

Question

Please can some help me with this error. I'm quite new to React framework. I have some basic understanding of client and server side rendering.

I'm following example : https://nextui.org/docs/components/table Use Case Example When creating a table, you usually need core functionalities like sorting, pagination, and filtering. In the example below, we combined all these functionalities to create a complete table.

My example fetch api call which returns following output.

[{ "id": 1, "name": "abc123", "description": "This is an example", "test": 60, "status": "Active" }]

Code is almost same except changed users to myusers in the example. I believe following line is culprit.

full code: https://pastebin.com/qNCvbZM0

    <TableBody emptyContent={"No users found"} items={sortedItems}>
           {(item) => (
             <TableRow key={item.id}>
               {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
             </TableRow>
           )}
    </TableBody>

Full error

⨯ node_modules/@react-stately/table/dist/import.mjs (724:66) @ key
 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'key')
    at new $788781baa30117fa$export$596e1b2e2cf93690 (./node_modules/@react-stately/table/dist/import.mjs:731:67)
    at eval (./node_modules/@react-stately/table/dist/import.mjs:754:165)
    at eval (./node_modules/@react-stately/collections/dist/import.mjs:318:16)
    at Object.oL [as useMemo] (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:12:72820)
    at t.useMemo (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162746)
    at $7613b1592d41b092$export$6cd28814d92fa9c9 (./node_modules/@react-stately/collections/dist/import.mjs:312:65)
    at $4a0dd036d492cee4$export$907bcc6c48325fd6 (./node_modules/@react-stately/table/dist/import.mjs:754:96)
    at useTable (./node_modules/@nextui-org/table/dist/chunk-774VMS2G.mjs:31:86)
    at eval (./node_modules/@nextui-org/table/dist/chunk-MJZDDVZM.mjs:27:256)
    at as (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6505)
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41191)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at av (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:43088)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at aC (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:38901
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:39374)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46613)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54301
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54968
    at a$ (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54976)
    at Timeout._onTimeout (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:4037)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

Searched google and stackoverflow. Checked code line by line. Everything works except the return statement.

Answer 1

I had the same issue with columns

<TableHeader columns={headerColumns}>
  {(column) => (
    <TableColumn
      key={column.uid}
      align={column.uid === "actions" ? "center" : "start"}
      allowsSorting={column.sortable}
    >
      {column.name}
    </TableColumn>
  )}
</TableHeader>

I wanted to pass an empty array [] to headerColumns to see how it behaves, and it threw the same error. It seems that TableHeader columns= does not handle errors!

My solution was not to use {(column) => ( and {(item) => (.

I solved the problem like this:

<TableHeader>
  {headerColumns && headerColumns.length > 0 ? (
    headerColumns.map((column) => (
      <TableColumn
        key={column.uid || 0}
        align={column.uid === "actions" ? "center" : "start"}
        allowsSorting={column.sortable}
      >
        {column.name}
      </TableColumn>
    ))
  ) : (
    <TableColumn>Not found</TableColumn>
  )}
</TableHeader>
<TableBody emptyContent={"No users found"}>
  {sortedItems && sortedItems.length > 0 ? (
    sortedItems.map((item) => (
      <TableRow key={item.id || 0}>
        {(columnKey) => (
          <TableCell>{renderCell(item, columnKey)}</TableCell>
        )}
      </TableRow>
    ))
  ) : (
    <TableRow>
      <TableCell>Not found</TableCell>
    </TableRow>
  )}
</TableBody>

And it worked correctly, remember that you can optimize the above code better to handle errors more effectively.