From 5e0f563ee4864eb9a628f9caf9ecc2d6e6ebb8dd Mon Sep 17 00:00:00 2001
From: Micha Reiser <micha@reiser.io>
Date: Mon, 7 Apr 2025 18:39:21 +0200
Subject: [PATCH] [red-knot] Fix stale syntax errors in playground (#17280)

## Summary

React requires that `key`s are unique but the constructed key for
diagnostics wasn't guaranteed when two diagnostics had the same name and
location.

This PR fixes this by using a disambiguator map to disambiguate the key.

Fixes #17276

## Test Plan



https://github.com/user-attachments/assets/f3f9d10a-ecc4-4ffe-8676-3633a12e07ce
---
 playground/knot/src/Editor/Diagnostics.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/playground/knot/src/Editor/Diagnostics.tsx b/playground/knot/src/Editor/Diagnostics.tsx
index 2a087c33ed..a8616c9bb0 100644
--- a/playground/knot/src/Editor/Diagnostics.tsx
+++ b/playground/knot/src/Editor/Diagnostics.tsx
@@ -62,9 +62,11 @@ function Items({
     );
   }
 
+  const uniqueIds: Map<string, number> = new Map();
+
   return (
     <ul className="space-y-0.5 grow overflow-y-scroll">
-      {diagnostics.map((diagnostic, index) => {
+      {diagnostics.map((diagnostic) => {
         const position = diagnostic.range;
         const start = position?.start;
         const id = diagnostic.id;
@@ -72,8 +74,13 @@ function Items({
         const startLine = start?.line ?? 1;
         const startColumn = start?.column ?? 1;
 
+        const mostlyUniqueId = `${startLine}:${startColumn}-${id}`;
+
+        const disambiguator = uniqueIds.get(mostlyUniqueId) ?? 0;
+        uniqueIds.set(mostlyUniqueId, disambiguator + 1);
+
         return (
-          <li key={`${startLine}:${startColumn}-${id ?? index}`}>
+          <li key={`${mostlyUniqueId}-${disambiguator}`}>
             <button
               onClick={() => onGoTo(startLine, startColumn)}
               className="w-full text-start cursor-pointer select-text"