Merge pull request #3777 from karyanayandi/fix/stable-composite-keys-in-mapped-lists

fix: replace index-only keys with stable composite keys in mapped lists

Author: Siumauricio

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -194,13 +194,21 @@ export const ShowDeployment = ({
 					{" "}
 					{filteredLogs.length > 0 ? (
 						filteredLogs.map((log: LogLine, index: number) => (
-							<TerminalLine key={index} log={log} noTimestamp />
+							<TerminalLine
+								key={`${log.rawTimestamp ?? ""}-${index}`}
+								log={log}
+								noTimestamp
+							/>
 						))
 					) : (
 						<>
 							{optionalErrors.length > 0 ? (
 								optionalErrors.map((log: LogLine, index: number) => (
-									<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
+									<TerminalLine
+										key={`extra-${log.rawTimestamp ?? ""}-${index}`}
+										log={log}
+										noTimestamp
+									/>
 								))
 							) : (
 								<div className="flex justify-center items-center h-full text-muted-foreground">

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -459,7 +459,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 										<div className="flex flex-wrap gap-2 mb-2">
 											{field.value?.map((path, index) => (
 												<Badge
-													key={index}
+													key={`${path}-${index}`}
 													variant="secondary"
 													className="flex items-center gap-1"
 												>

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -448,7 +448,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 									<div className="flex flex-wrap gap-2 mb-2">
 										{field.value?.map((path, index) => (
 											<Badge
-												key={index}
+												key={`${path}-${index}`}
 												variant="secondary"
 												className="flex items-center gap-1"
 											>

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -402,7 +402,7 @@ export const DockerLogsId: React.FC<Props> = ({
 						{filteredLogs.length > 0 ? (
 							filteredLogs.map((filteredLog: LogLine, index: number) => (
 								<TerminalLine
-									key={index}
+									key={`${filteredLog.rawTimestamp ?? ""}-${index}`}
 									log={filteredLog}
 									searchTerm={search}
 									noTimestamp={!showTimestamp}

apps/dokploy/components/dashboard/settings/profile/configure-2fa.tsx

@@ -356,7 +356,7 @@ export const Configure2FA = () => {
 								<div className="grid grid-cols-2 gap-2">
 									{backupCodes.map((code, index) => (
 										<code
-											key={index}
+											key={`${code}-${index}`}
 											className="bg-background p-2 rounded text-sm font-mono text-center"
 										>
 											{code}

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -401,7 +401,7 @@ export const Enable2FA = () => {
 												<div className="grid grid-cols-2 gap-2">
 													{backupCodes.map((code, index) => (
 														<code
-															key={index}
+															key={`${code}-${index}`}
 															className="bg-muted p-2 rounded text-sm font-mono"
 														>
 															{code}

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx

@@ -307,9 +307,9 @@ export const WelcomeSuscription = () => {
 										</div>
 
 										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-											{features.map((feature, index) => (
+											{features.map((feature) => (
 												<div
-													key={index}
+													key={feature.title}
 													className="flex flex-col items-start p-4 bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow"
 												>
 													<div className="text-3xl mb-2">{feature.icon}</div>

apps/dokploy/components/shared/drawer-logs.tsx

@@ -60,7 +60,11 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
 					{" "}
 					{filteredLogs.length > 0 ? (
 						filteredLogs.map((log: LogLine, index: number) => (
-							<TerminalLine key={index} log={log} noTimestamp />
+							<TerminalLine
+								key={`${log.rawTimestamp ?? ""}-${index}`}
+								log={log}
+								noTimestamp
+							/>
 						))
 					) : (
 						<div className="flex justify-center items-center h-full text-muted-foreground">