Add key property to list children in Highlight component

storybookjs · Mar 13, 2024 · 55761f8 · 55761f8
1 parent 49593b5
commit 55761f8
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/code/ui/manager/src/components/sidebar/SearchResults.tsx b/code/ui/manager/src/components/sidebar/SearchResults.tsx
@@ -111,10 +111,10 @@ const Highlight: FC<PropsWithChildren<{ match?: Match }>> = React.memo(function
   const { value, indices } = match;
   const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
     ({ cursor, nodes }, [start, end], index, { length }) => {
-      nodes.push(<span>{value.slice(cursor, start)}</span>);
-      nodes.push(<Mark>{value.slice(start, end + 1)}</Mark>);
+      nodes.push(<span key={`${index}-1`}>{value.slice(cursor, start)}</span>);
+      nodes.push(<Mark key={`${index}-2`}>{value.slice(start, end + 1)}</Mark>);
       if (index === length - 1) {
-        nodes.push(<span>{value.slice(end + 1)}</span>);
+        nodes.push(<span key={`${index}-3`}>{value.slice(end + 1)}</span>);
       }
       return { cursor: end + 1, nodes };
     },