Fix keys in Flexible General

Author: domlander

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -104,7 +104,7 @@ const ImmersiveCardLayout = ({
 	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 
 	return (
-		<UL padBottom={true} key={card.url}>
+		<UL padBottom={true}>
 			<LI padSides={true}>
 				<FeatureCard
 					collectionId={collectionId}
@@ -442,7 +442,6 @@ const FullWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			padBottom={!isLastRow}
 			hasLargeSpacing={!isLastRow}
-			key={card.url}
 		>
 			<LI
 				padSides={true}
@@ -496,7 +495,6 @@ type HalfWidthCardLayoutProps = {
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
-	row: number;
 	isLastRow: boolean;
 	containerLevel: DCRContainerLevel;
 };
@@ -510,7 +508,6 @@ const HalfWidthCardLayout = ({
 	isFirstRow,
 	isFirstStandardRow,
 	aspectRatio,
-	row,
 	isLastRow,
 	containerLevel,
 }: HalfWidthCardLayoutProps) => {
@@ -524,7 +521,6 @@ const HalfWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			/** We use one full top bar for the first row and use a split one for subsequent rows */
 			splitTopBar={!isFirstStandardRow}
-			key={row}
 		>
 			{cards.map((card, cardIndex) => {
 				return (
@@ -628,6 +624,7 @@ export const FlexibleGeneral = ({
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								collectionId={collectionId}
+								key={row.cards[0]?.uniqueId}
 							/>
 						);
 
@@ -644,9 +641,9 @@ export const FlexibleGeneral = ({
 								isFirstRow={!splash.length && i === 0}
 								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
-								row={i + 1}
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
+								key={row.cards[0]?.uniqueId}
 							/>
 						);
 				}