trouble with React Table 7 unique key warning

Question

I am using React Table 7 to build my tables, and the tables render but I'm getting a warning Each child in a list should have a unique "key" prop. 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

<thead>
 {headerGroups.map((headerGroup, i) => (
                <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}> ...

and line 176 where I have:

<tr
                      key={row.id}
                      {...row.getRowProps()}
                      onClick={rowOnClick ? () => rowClickHandler(row.original) : () => ""}
                    >

Where am I missing a key?

TABLE

 <React.Fragment>
      <Row>
        <Col>
          <Table striped bordered hover size="sm" responsive {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup, i) => (
                <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
                  {headerGroup.headers.map((column) => (
                    <th
                      className={`p-2 table-header ${headerColor ? "primary-" + headerColor : "primary-deq"}`}
                      {...column.getHeaderProps()}
                    >
                      <span {...column.getSortByToggleProps()}>
                        {column.render("Header")}
                        {column.isSorted ? (
                          column.isSortedDesc ? (
                            <FontAwesomeIcon className="ml-3" icon={faArrowDown} />
                          ) : (
                            <FontAwesomeIcon className="ml-3" icon={faArrowUp} />
                          )
                        ) : (
                          ""
                        )}
                      </span>
                      <div {...column.getResizerProps()} className="resizer" />
                      {column.canResize && (
                        <div
                          {...column.getResizerProps()}
                          className={`resizer ${column.isResizing ? "isResizing" : ""}`}
                        />
                      )}
                      <div>{column.canFilter ? column.render("Filter") : null}</div>
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {page.map((row, i) => {
                prepareRow(row);
                return (
                  <React.Fragment>
                    <tr
                      key={row.id}
                      {...row.getRowProps()}
                      onClick={rowOnClick ? () => rowClickHandler(row.original) : () => ""}
                    >
                      {row.cells.map((cell) => {
                        return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                      })}
                    </tr>
                    {row.isExpanded ? (
                      <tr>
                        <td>
                          <span className="subTable">{renderRowSubComponent({ row })}</span>
                        </td>
                      </tr>
                    ) : null}
                  </React.Fragment>
                );
              })}
            </tbody>
          </Table>
          {showPagination ? (
            <Row className="mt-2 text-center">
              <Col>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => gotoPage(0)}
                  disabled={!canPreviousPage}
                >
                  <FontAwesomeIcon icon={faAngleDoubleLeft} />
                </Button>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => previousPage()}
                  disabled={!canPreviousPage}
                >
                  <FontAwesomeIcon icon={faAngleLeft} />
                </Button>
              </Col>
              <Col>
                <span>
                  Page{" "}
                  <strong>
                    {pageIndex + 1} of {pageOptions.length}
                  </strong>{" "}
                </span>
                <span>
                  | Go to page:{" "}
                  <InputGroup size="sm" style={{ width: "20%", display: "inline-flex" }}>
                    <FormControl
                      type="number"
                      defaultValue={pageIndex + 1}
                      onChange={(e) => {
                        const page = e.target.value ? Number(e.target.value) - 1 : 0;
                        gotoPage(page);
                      }}
                    />
                  </InputGroup>
                </span>{" "}
                <InputGroup size="sm" style={{ width: "30%", display: "inline-flex" }}>
                  <FormControl
                    size="sm"
                    as="select"
                    value={pageSize}
                    onChange={(e) => {
                      setPageSize(Number(e.target.value));
                    }}
                  >
                    {[5, 10, 20, 30, 40, 50].map((pageSize) => (
                      <option key={pageSize} value={pageSize}>
                        Show {pageSize}
                      </option>
                    ))}
                  </FormControl>
                </InputGroup>
              </Col>
              <Col>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => nextPage()}
                  disabled={!canNextPage}
                >
                  <FontAwesomeIcon icon={faAngleRight} />{" "}
                </Button>
                <Button
                  className="mr-2"
                  size="sm"
                  variant="secondary"
                  onClick={() => gotoPage(pageCount - 1)}
                  disabled={!canNextPage}
                >
                  <FontAwesomeIcon icon={faAngleDoubleRight} />
                </Button>
              </Col>
            </Row>
          ) : (
            ""
          )}
        </Col>
      </Row>
    </React.Fragment>

ERROR:

Warning: Each child in a list should have a unique "key" 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<@http://localhost:3000/static/js/0.chunk.js:36550:18
div
./node_modules/react-bootstrap/esm/Row.js/Row<@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<@http://localhost:3000/static/js/0.chunk.js:36550:18
div
./node_modules/react-bootstrap/esm/Row.js/Row<@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

Answer 1

You don't have keys in few place in this code.. e.g

{ headerGroup.headers.map((column) => (
    <th
        className={`p-2 table-header ${headerColor ? "primary-" + headerColor : "primary-deq"}`
        {...column.getHeaderProps()}

Another problem may be that your keys are not unique. When you use map you can use the second parameter which is the iteration number, this will guarantee that your keys will be unique. E.g

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

// i instead of headerGroup.id is unique