From 53f8471d7575873426b10c854ed99f22d02873a6 Mon Sep 17 00:00:00 2001
From: tigattack <10629864+tigattack@users.noreply.github.com>
Date: Wed, 24 Sep 2025 23:55:25 +0100
Subject: [PATCH] fix(frontend): Avoid using the index of an array as key
 property in an element

---
 frontend/src/pages/Dashboard.jsx  | 5 ++++-
 frontend/src/pages/HostDetail.jsx | 8 ++++----
 frontend/src/pages/Hosts.jsx      | 4 ++--
 frontend/src/pages/Profile.jsx    | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index ab0d3f1..2b58ebf 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1154,7 +1154,10 @@ const Dashboard = () => {
 				return (
 					<>
 						{cardGroups.map((group, groupIndex) => (
-							<div key={groupIndex} className={getGroupClassName(group.type)}>
+							<div
+								key={`${group.type}-${group.cards[0]?.cardId || groupIndex}`}
+								className={getGroupClassName(group.type)}
+							>
 								{group.cards.map((card) => (
 									<div key={card.cardId}>{renderCard(card.cardId)}</div>
 								))}
diff --git a/frontend/src/pages/HostDetail.jsx b/frontend/src/pages/HostDetail.jsx
index 7728b09..6965591 100644
--- a/frontend/src/pages/HostDetail.jsx
+++ b/frontend/src/pages/HostDetail.jsx
@@ -490,7 +490,7 @@ const HostDetail = () => {
 														<div className="space-y-1">
 															{host.dns_servers.map((dns, index) => (
 																<p
-																	key={index}
+																	key={dns}
 																	className="font-medium text-secondary-900 dark:text-white font-mono text-sm"
 																>
 																	{dns}
@@ -510,7 +510,7 @@ const HostDetail = () => {
 														<div className="space-y-1">
 															{host.network_interfaces.map((iface, index) => (
 																<p
-																	key={index}
+																	key={iface.name}
 																	className="font-medium text-secondary-900 dark:text-white text-sm"
 																>
 																	{iface.name}
@@ -699,7 +699,7 @@ const HostDetail = () => {
 														{host.load_average
 															.filter((load) => load != null)
 															.map((load, index) => (
-																<span key={index}>
+																<span key={`load-${index}-${load}`}>
 																	{typeof load === "number"
 																		? load.toFixed(2)
 																		: String(load)}
@@ -727,7 +727,7 @@ const HostDetail = () => {
 												<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
 													{host.disk_details.map((disk, index) => (
 														<div
-															key={index}
+															key={disk.name || `disk-${index}`}
 															className="bg-secondary-50 dark:bg-secondary-700 p-3 rounded-lg"
 														>
 															<div className="flex items-center gap-2 mb-2">
diff --git a/frontend/src/pages/Hosts.jsx b/frontend/src/pages/Hosts.jsx
index 66e26cd..f229388 100644
--- a/frontend/src/pages/Hosts.jsx
+++ b/frontend/src/pages/Hosts.jsx
@@ -2139,7 +2139,7 @@ const BulkAssignModal = ({
 					</p>
 					<div className="max-h-32 overflow-y-auto bg-secondary-50 rounded-md p-3">
 						{selectedHostNames.map((friendlyName, index) => (
-							<div key={index} className="text-sm text-secondary-700">
+							<div key={friendlyName} className="text-sm text-secondary-700">
 								• {friendlyName}
 							</div>
 						))}
@@ -2250,7 +2250,7 @@ const BulkDeleteModal = ({
 						<div className="max-h-32 overflow-y-auto bg-secondary-50 dark:bg-secondary-700 rounded-md p-3">
 							{selectedHostNames.map((friendlyName, index) => (
 								<div
-									key={index}
+									key={friendlyName}
 									className="text-sm text-secondary-700 dark:text-secondary-300"
 								>
 									• {friendlyName}
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index a210adf..1794e36 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -987,7 +987,7 @@ const TfaTab = () => {
 							<div className="grid grid-cols-2 gap-2 font-mono text-sm">
 								{backupCodes.map((code, index) => (
 									<div
-										key={index}
+										key={code}
 										className="flex items-center justify-between py-1"
 									>
 										<span className="text-secondary-600 dark:text-secondary-400">