Fix up some React keys in Flexible General

Author: domlander

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -105,8 +105,8 @@ const ImmersiveCardLayout = ({
 	const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
 
 	return (
-		<UL padBottom={true}>
-			<LI key={card.url} padSides={true}>
+		<UL padBottom={true} key={card.url}>
+			<LI padSides={true}>
 				<FeatureCard
 					collectionId={collectionId}
 					linkTo={card.url}
@@ -447,6 +447,7 @@ const FullWidthCardLayout = ({
 			showTopBar={!isFirstRow}
 			padBottom={!isLastRow}
 			hasLargeSpacing={!isLastRow}
+			key={card.url}
 		>
 			<LI
 				padSides={true}
@@ -501,6 +502,7 @@ const HalfWidthCardLayout = ({
 	isFirstRow,
 	isFirstStandardRow,
 	aspectRatio,
+	row,
 	isLastRow,
 	containerLevel,
 	isInHideTrailsAbTest,
@@ -513,6 +515,7 @@ const HalfWidthCardLayout = ({
 	showAge?: boolean;
 	absoluteServerTimes: boolean;
 	aspectRatio: AspectRatio;
+	row: number;
 	isLastRow: boolean;
 	containerLevel: DCRContainerLevel;
 	isInHideTrailsAbTest?: boolean;
@@ -527,6 +530,7 @@ 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 (
@@ -642,6 +646,7 @@ export const FlexibleGeneral = ({
 								isFirstRow={!splash.length && i === 0}
 								isFirstStandardRow={i === 0}
 								aspectRatio={aspectRatio}
+								row={i + 1}
 								isLastRow={i === groupedCards.length - 1}
 								containerLevel={containerLevel}
 								isInHideTrailsAbTest={isInHideTrailsAbTest}