chore: more react key warnings fixed

klarna-incubator · Jul 2, 2024 · 0cebffd · 0cebffd
1 parent 73cbbd3
commit 0cebffd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/app/src/components/elements/list/ModelList.js b/app/src/components/elements/list/ModelList.js
@@ -6,7 +6,7 @@ import {
   ListItemButton,
   ListItemText,
 } from "@mui/material";
-import React from "react";
+import React, { Fragment } from "react";
 import { Link } from "react-router-dom";
 import Loading from "../../loading";
 import { SystemName } from "../../reviews/SystemName";
@@ -32,7 +32,7 @@ export function ModelList({
           )}
           {Array.isArray(models) &&
             models.map((model, i) => (
-              <>
+              <Fragment key={`mdl-${model.id}`}>
                 <ListItemButton
                   component={Link}
                   to={`/model/${model.id}`}
@@ -62,7 +62,7 @@ export function ModelList({
                   />
                 </ListItemButton>
                 {i < models.length - 1 && <Divider component="li" />}
-              </>
+              </Fragment>
             ))}
         </List>
       </CardContent>

diff --git a/app/src/components/systems/TeamSystems/TeamSystemPage.js b/app/src/components/systems/TeamSystems/TeamSystemPage.js
@@ -41,7 +41,12 @@ export function TeamSystemsPage() {
       >
         {/* Some employees have more than one team */}
         {teams.map((tid) => (
-          <Grid item xs={6} sx={{ display: "flex", flexDirection: "column" }}>
+          <Grid
+            key={`team-grid-${tid}`}
+            item
+            xs={6}
+            sx={{ display: "flex", flexDirection: "column" }}
+          >
             <TeamSystemsPageList key={tid} teamId={tid} />
           </Grid>
         ))}

diff --git a/app/src/components/systems/TeamSystems/TeamSystemsPageList.js b/app/src/components/systems/TeamSystems/TeamSystemsPageList.js
@@ -9,7 +9,7 @@ import {
   Pagination,
   Typography,
 } from "@mui/material";
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
 import { useListSystemsQuery } from "../../../api/gram/system";
 import { SystemComplianceBadge } from "../../elements/SystemComplianceBadge";
@@ -59,17 +59,17 @@ export function TeamSystemsPageList({ teamId, pagesize = 10 }) {
             <Loading />
           ) : systems ? (
             systems.map((system, i) => (
-              <>
+              <Fragment key={`sys-${system.id}`}>
                 <ListItemButton
                   component={Link}
                   to={`/system/${system.id}`}
-                  key={system.id}
+                  key={`sys-btn-${system.id}`}
                 >
                   <ListItemText primary={system.displayName} />
                   <SystemComplianceBadge compliance={system.compliance} />
                 </ListItemButton>
                 {i < systems.length - 1 && <Divider component="li" />}
-              </>
+              </Fragment>
             ))
           ) : (
             <ListItemText primary="No team systems available." />