title: trouble with React Table 7 unique key warning
body: <p>I am using React Table 7 to build my tables, and the tables render but I'm getting a warning <code>Each child in a list should have a unique &quot;key&quot; prop.</code> I have included keys in the headerGroup map and the rows but am still getting the warning. There error seems to only be point to line 137, where i do have a key</p>
  <pre><code>&lt;thead&gt;
   {headerGroups.map((headerGroup, i) =&gt; (
                  &lt;tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}&gt; ...
  
  </code></pre>
  <p>and line 176 where I have:</p>
  <pre><code>&lt;tr
                        key={row.id}
                        {...row.getRowProps()}
                        onClick={rowOnClick ? () =&gt; rowClickHandler(row.original) : () =&gt; &quot;&quot;}
                      &gt;
  </code></pre>
  <p>Where am I missing a key?</p>
  <p>TABLE</p>
  <pre><code> &lt;React.Fragment&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            &lt;Table striped bordered hover size=&quot;sm&quot; responsive {...getTableProps()}&gt;
              &lt;thead&gt;
                {headerGroups.map((headerGroup, i) =&gt; (
                  &lt;tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}&gt;
                    {headerGroup.headers.map((column) =&gt; (
                      &lt;th
                        className={`p-2 table-header ${headerColor ? &quot;primary-&quot; + headerColor : &quot;primary-deq&quot;}`}
                        {...column.getHeaderProps()}
                      &gt;
                        &lt;span {...column.getSortByToggleProps()}&gt;
                          {column.render(&quot;Header&quot;)}
                          {column.isSorted ? (
                            column.isSortedDesc ? (
                              &lt;FontAwesomeIcon className=&quot;ml-3&quot; icon={faArrowDown} /&gt;
                            ) : (
                              &lt;FontAwesomeIcon className=&quot;ml-3&quot; icon={faArrowUp} /&gt;
                            )
                          ) : (
                            &quot;&quot;
                          )}
                        &lt;/span&gt;
                        &lt;div {...column.getResizerProps()} className=&quot;resizer&quot; /&gt;
                        {column.canResize &amp;&amp; (
                          &lt;div
                            {...column.getResizerProps()}
                            className={`resizer ${column.isResizing ? &quot;isResizing&quot; : &quot;&quot;}`}
                          /&gt;
                        )}
                        &lt;div&gt;{column.canFilter ? column.render(&quot;Filter&quot;) : null}&lt;/div&gt;
                      &lt;/th&gt;
                    ))}
                  &lt;/tr&gt;
                ))}
              &lt;/thead&gt;
              &lt;tbody {...getTableBodyProps()}&gt;
                {page.map((row, i) =&gt; {
                  prepareRow(row);
                  return (
                    &lt;React.Fragment&gt;
                      &lt;tr
                        key={row.id}
                        {...row.getRowProps()}
                        onClick={rowOnClick ? () =&gt; rowClickHandler(row.original) : () =&gt; &quot;&quot;}
                      &gt;
                        {row.cells.map((cell) =&gt; {
                          return &lt;td {...cell.getCellProps()}&gt;{cell.render(&quot;Cell&quot;)}&lt;/td&gt;;
                        })}
                      &lt;/tr&gt;
                      {row.isExpanded ? (
                        &lt;tr&gt;
                          &lt;td&gt;
                            &lt;span className=&quot;subTable&quot;&gt;{renderRowSubComponent({ row })}&lt;/span&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      ) : null}
                    &lt;/React.Fragment&gt;
                  );
                })}
              &lt;/tbody&gt;
            &lt;/Table&gt;
            {showPagination ? (
              &lt;Row className=&quot;mt-2 text-center&quot;&gt;
                &lt;Col&gt;
                  &lt;Button
                    className=&quot;mr-2&quot;
                    size=&quot;sm&quot;
                    variant=&quot;secondary&quot;
                    onClick={() =&gt; gotoPage(0)}
                    disabled={!canPreviousPage}
                  &gt;
                    &lt;FontAwesomeIcon icon={faAngleDoubleLeft} /&gt;
                  &lt;/Button&gt;
                  &lt;Button
                    className=&quot;mr-2&quot;
                    size=&quot;sm&quot;
                    variant=&quot;secondary&quot;
                    onClick={() =&gt; previousPage()}
                    disabled={!canPreviousPage}
                  &gt;
                    &lt;FontAwesomeIcon icon={faAngleLeft} /&gt;
                  &lt;/Button&gt;
                &lt;/Col&gt;
                &lt;Col&gt;
                  &lt;span&gt;
                    Page{&quot; &quot;}
                    &lt;strong&gt;
                      {pageIndex + 1} of {pageOptions.length}
                    &lt;/strong&gt;{&quot; &quot;}
                  &lt;/span&gt;
                  &lt;span&gt;
                    | Go to page:{&quot; &quot;}
                    &lt;InputGroup size=&quot;sm&quot; style={{ width: &quot;20%&quot;, display: &quot;inline-flex&quot; }}&gt;
                      &lt;FormControl
                        type=&quot;number&quot;
                        defaultValue={pageIndex + 1}
                        onChange={(e) =&gt; {
                          const page = e.target.value ? Number(e.target.value) - 1 : 0;
                          gotoPage(page);
                        }}
                      /&gt;
                    &lt;/InputGroup&gt;
                  &lt;/span&gt;{&quot; &quot;}
                  &lt;InputGroup size=&quot;sm&quot; style={{ width: &quot;30%&quot;, display: &quot;inline-flex&quot; }}&gt;
                    &lt;FormControl
                      size=&quot;sm&quot;
                      as=&quot;select&quot;
                      value={pageSize}
                      onChange={(e) =&gt; {
                        setPageSize(Number(e.target.value));
                      }}
                    &gt;
                      {[5, 10, 20, 30, 40, 50].map((pageSize) =&gt; (
                        &lt;option key={pageSize} value={pageSize}&gt;
                          Show {pageSize}
                        &lt;/option&gt;
                      ))}
                    &lt;/FormControl&gt;
                  &lt;/InputGroup&gt;
                &lt;/Col&gt;
                &lt;Col&gt;
                  &lt;Button
                    className=&quot;mr-2&quot;
                    size=&quot;sm&quot;
                    variant=&quot;secondary&quot;
                    onClick={() =&gt; nextPage()}
                    disabled={!canNextPage}
                  &gt;
                    &lt;FontAwesomeIcon icon={faAngleRight} /&gt;{&quot; &quot;}
                  &lt;/Button&gt;
                  &lt;Button
                    className=&quot;mr-2&quot;
                    size=&quot;sm&quot;
                    variant=&quot;secondary&quot;
                    onClick={() =&gt; gotoPage(pageCount - 1)}
                    disabled={!canNextPage}
                  &gt;
                    &lt;FontAwesomeIcon icon={faAngleDoubleRight} /&gt;
                  &lt;/Button&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
            ) : (
              &quot;&quot;
            )}
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/React.Fragment&gt;
  </code></pre>
  <p>ERROR:</p>
  <pre><code>Warning: Each child in a list should have a unique &quot;key&quot; prop.
  
  Check the render method of `DtsReactTable`. See https://reactjs.org/link/warning-keys for more information.
  tr
  DtsReactTable@http://localhost:3000/static/js/main.chunk.js:11780:23
  div
  ./node_modules/react-bootstrap/esm/Col.js/Col&lt;@http://localhost:3000/static/js/0.chunk.js:36550:18
  div
  ./node_modules/react-bootstrap/esm/Row.js/Row&lt;@http://localhost:3000/static/js/0.chunk.js:40631:18
  EnforcementActionsTable@http://localhost:3000/static/js/main.chunk.js:4237:11
  div
  ./node_modules/react-bootstrap/esm/Col.js/Col&lt;@http://localhost:3000/static/js/0.chunk.js:36550:18
  div
  ./node_modules/react-bootstrap/esm/Row.js/Row&lt;@http://localhost:3000/static/js/0.chunk.js:40631:18
  IncidentSummaryPage@http://localhost:3000/static/js/main.chunk.js:1056:5
  ConnectFunction@http://localhost:3000/static/js/0.chunk.js:75747:75
  Route@http://localhost:3000/static/js/0.chunk.js:78589:29
  Switch@http://localhost:3000/static/js/0.chunk.js:78791:29
  div
  div
  Router@http://localhost:3000/static/js/0.chunk.js:78224:30
  ConnectedRouter@http://localhost:3000/static/js/0.chunk.js:17909:22
  ConnectedRouterWithContext@http://localhost:3000/static/js/0.chunk.js:18014:19
  ConnectFunction@http://localhost:3000/static/js/0.chunk.js:75747:75
  Provider@http://localhost:3000/static/js/0.chunk.js:75460:15
  App@http://localhost:3000/static/js/main.chunk.js:176:1 
      in DtsReactTable (at EnforcementActionsTable.js:149)
      in EnforcementActionsTable (at IncidentSummaryPage.js:187)
      in IncidentSummaryPage (created by Connect(IncidentSummaryPage))
      in Connect(IncidentSummaryPage) (at App.js:98)
      in Router.Consumer (created by Route)
      in Route (at App.js:95)
      in App (at src/​index.js:10) index.js:1
      e index.js:1
      r backend.js:6
      React 5
      DtsReactTable DtsReactTable.js:136
      React 9
      unstable_runWithPriority scheduler.development.js:646
      React 4
      Redux 4
      e 1040:1
      immutableStateInvariantMiddleware Immutable
      createThunkMiddleware Redux
      routerMiddleware middleware.js:22
      Redux 4
      routerMiddleware middleware.js:22
      dispatch 1040:1
      bindActionCreator Redux
      componentDidMount IncidentSummaryPage.js:50
      React 6
      unstable_runWithPriority scheduler.development.js:646
      React 9
      js index.js:10
      js main.chunk.js:13289
      Webpack 7
  
  </code></pre>