Theo's Typesafe Cult•17mo ago

React Table getting weird key error

Hey guys, using react table in my current project. I was getting linting errors on Vercel for not having a key on my .maps inside of the table, so I tried adding them, however im getting some strange errors that I haven't really been able to understand whats going on. I have a code snippet of my head below, and screenshot of the error I am receiving . "'key' is specified more than once, so this usage will be overwritten." Any ideas on whats going on here?

      <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
          {headerGroups.map((headerGroup, i) => (
            <tr key={i} {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th className="px-6 py-3" {...column.getHeaderProps()}>
                  {column.render("Header")}
                </th>
              ))}
            </tr>
          ))}

      <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
          {headerGroups.map((headerGroup, i) => (
            <tr key={i} {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th className="px-6 py-3" {...column.getHeaderProps()}>
                  {column.render("Header")}
                </th>
              ))}
            </tr>
          ))}

2 Replies

Piotrek•17mo ago

the error says that you basically don't need the key, it's being passed using the getHeaderGroupProps() function

Matvey•17mo ago

headerGroup.getHeaderGroupProps() includes the key, so remove the key prop or move it to the end

<tr {...headerGroup.getHeaderGroupProps()} key={i}>

<tr {...headerGroup.getHeaderGroupProps()} key={i}>

Gaming

Programming

React Table getting weird key error