react-table and react/jsx-key eslint rules

[tyteen4a03]

How do I make react-table work better with react/jsx-key? Currently get*Props supply the key which means eslint complains about missing key in loop, even though the key is actually supplied by react-table.

[kbrooks]

A dumb workaround for this is to destructure the key out of the cellProps and pass it manually to the div.

          {row.cells.map((cell) => {
            const { key, ...restCellProps } = cell.getCellProps();
            return (
              <div key={key} {...restCellProps}>
                {cell.render('Cell')}
              </div>
            );
          })}

[dolie]

Nice workaround. Thank you !

[yaroslavdraha]

works perfect, thank you!

[sarahmattar]

Thank you!!

[sarahmattar]

The above solution works. Doing the header section of the table was a bit gnarly though, and inevitably someone will also be looking for it, so I will post what I have just painstakingly done:

   <thead>
        {headerGroups.map(headerGroup => {
          const { key, ...restHeaderGroupProps } = headerGroup.getHeaderGroupProps()
          return (
            <tr key={key} {...restHeaderGroupProps}>
              {headerGroup.headers.map(column => {
                const { key, ...restColumn } = column.getHeaderProps()
                return (
                  <th key={key} {...restColumn}>
                    {column.render('Header')}
                  </th>
                )
              })}
            </tr>
          )
        })}
   </thead>

Hope this helps! Tanner, update your docs for react-table with the ESLint friendly version :)

[fre-ben]

Wow - this is really messy, but it works. And thanks for posting the header section :)

[fre-ben]

If anyone runs into the same problem - here is the code for a fully destructured ESLint safe version of a basic react-table as in the documentation (https://react-table.tanstack.com/docs/quick-start#applying-the-table-instance-to-markup):

 return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => {
          const { key, ...restHeaderGroupProps } =
            headerGroup.getHeaderGroupProps();
          return (
            <tr key={key} {...restHeaderGroupProps}>
              {headerGroup.headers.map((column) => {
                const { key, ...restColumn } = column.getHeaderProps();
                return (
                  <th key={key} {...restColumn}>
                    {column.render("Header")}
                  </th>
                );
              })}
            </tr>
          );
        })}
      </thead>
      <tbody {...getTableBodyProps}>
        {rows.map((row) => {
          prepareRow(row);
          const { key, ...restRowProps } = row.getRowProps();
          return (
            <tr key={key} {...restRowProps}>
              {row.cells.map((cell) => {
                const { key, ...restCellProps } = cell.getCellProps();
                return (
                  <td key={key} {...restCellProps}>
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );

[SurajanShrestha]

THANK YOU SO VERY MUCH.
I have a deadline tomorrow and eslint was showing errors. Your solution solved it.
Thanks again.

[Rhxrrr]

Absolutly goated im new to react and js html and css and these things making me cry

[sarahmattar]

It is a pain in the ass pattern, but valid javascript destructuring. I feel you - even though dealing with this specific problem was a couple lifetimes ago in my career, I'm having traumatic flashbacks to the summer of 2021 rereading these threads. 🥲

[Rhxrrr]

Haha yeah im new to the whole development world. im trying to build a simple website with minimal server functions for managing a mechanic shops used tire stock - but its killing me. i cry everyday.... this is life of a developer tho. it is what it is

[brianmgray]

Amazing! Thank you for this!

[johnbarhorst]

If anyone makes it down this far, and both doesn't want to do all the destructuring, and doesn't already know this, you can just tell eslint to ignore the rule. There's a tiny trick in that eslint gets weird about where you can put the comment for ignoring a react/rule,

jsx-eslint/eslint-plugin-react#2369

But if you just throw the following inside your jsx return, everything should work.

        {/* eslint-disable react/jsx-key */}
        {/* the jsx key is provided in the .get*Props() spreads, but eslint doesn't believe you. I believe you. */}

[noxify]

we had this - but in the next dev mode we got always an error in the web console that the unique key is missing.

At the end, it was just an <Fragment> element which has no key defined.
We implemented the mentioned solution from above - now everything is fine :)