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

This commit is contained in:
Yandi
2026-02-22 20:34:38 +07:00
parent 5435e1dac4
commit 69d3286aaf
8 changed files with 22 additions and 10 deletions
@@ -194,13 +194,21 @@ export const ShowDeployment = ({
{" "} {" "}
{filteredLogs.length > 0 ? ( {filteredLogs.length > 0 ? (
filteredLogs.map((log: LogLine, index: number) => ( filteredLogs.map((log: LogLine, index: number) => (
<TerminalLine key={index} log={log} noTimestamp /> <TerminalLine
key={`${log.rawTimestamp ?? ""}-${index}`}
log={log}
noTimestamp
/>
)) ))
) : ( ) : (
<> <>
{optionalErrors.length > 0 ? ( {optionalErrors.length > 0 ? (
optionalErrors.map((log: LogLine, index: number) => ( 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"> <div className="flex justify-center items-center h-full text-muted-foreground">
@@ -459,7 +459,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
<div className="flex flex-wrap gap-2 mb-2"> <div className="flex flex-wrap gap-2 mb-2">
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge <Badge
key={index} key={`${path}-${index}`}
variant="secondary" variant="secondary"
className="flex items-center gap-1" className="flex items-center gap-1"
> >
@@ -448,7 +448,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
<div className="flex flex-wrap gap-2 mb-2"> <div className="flex flex-wrap gap-2 mb-2">
{field.value?.map((path, index) => ( {field.value?.map((path, index) => (
<Badge <Badge
key={index} key={`${path}-${index}`}
variant="secondary" variant="secondary"
className="flex items-center gap-1" className="flex items-center gap-1"
> >
@@ -402,7 +402,7 @@ export const DockerLogsId: React.FC<Props> = ({
{filteredLogs.length > 0 ? ( {filteredLogs.length > 0 ? (
filteredLogs.map((filteredLog: LogLine, index: number) => ( filteredLogs.map((filteredLog: LogLine, index: number) => (
<TerminalLine <TerminalLine
key={index} key={`${filteredLog.rawTimestamp ?? ""}-${index}`}
log={filteredLog} log={filteredLog}
searchTerm={search} searchTerm={search}
noTimestamp={!showTimestamp} noTimestamp={!showTimestamp}
@@ -356,7 +356,7 @@ export const Configure2FA = () => {
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{backupCodes.map((code, index) => ( {backupCodes.map((code, index) => (
<code <code
key={index} key={`${code}-${index}`}
className="bg-background p-2 rounded text-sm font-mono text-center" className="bg-background p-2 rounded text-sm font-mono text-center"
> >
{code} {code}
@@ -401,7 +401,7 @@ export const Enable2FA = () => {
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{backupCodes.map((code, index) => ( {backupCodes.map((code, index) => (
<code <code
key={index} key={`${code}-${index}`}
className="bg-muted p-2 rounded text-sm font-mono" className="bg-muted p-2 rounded text-sm font-mono"
> >
{code} {code}
@@ -307,9 +307,9 @@ export const WelcomeSuscription = () => {
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{features.map((feature, index) => ( {features.map((feature) => (
<div <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" 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> <div className="text-3xl mb-2">{feature.icon}</div>
@@ -60,7 +60,11 @@ export const DrawerLogs = ({ isOpen, onClose, filteredLogs }: Props) => {
{" "} {" "}
{filteredLogs.length > 0 ? ( {filteredLogs.length > 0 ? (
filteredLogs.map((log: LogLine, index: number) => ( 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"> <div className="flex justify-center items-center h-full text-muted-foreground">