Use index rather than image URL to avoid duplicate keys (#15134)

jamesmockett · web-flow · commit 4d4322c4cde9 · 2026-01-15T12:41:26.000Z
diff --git a/dotcom-rendering/src/components/marketing/shared/ResponsiveImage.tsx b/dotcom-rendering/src/components/marketing/shared/ResponsiveImage.tsx
@@ -21,8 +21,8 @@ type ResponsiveImageProps = {
 	cssOverrides?: SerializedStyles;
 };
 
-function createSource(image: ImageAttrs): ReactElement {
-	return <source media={image.media} srcSet={image.url} key={image.url} />;
+function createSource(image: ImageAttrs, index: number): ReactElement {
+	return <source media={image.media} srcSet={image.url} key={index} />;
 }
 
 export const ResponsiveImage: ReactComponent<ResponsiveImageProps> = ({

Original file line number	Diff line number	Diff line change
`@@ -21,8 +21,8 @@ type ResponsiveImageProps = {`
`21`	`21`	`cssOverrides?: SerializedStyles;`
`22`	`22`	`};`
`23`	`23`
`24`		`-function createSource(image: ImageAttrs): ReactElement {`
`25`		`- return <source media={image.media} srcSet={image.url} key={image.url} />;`
	`24`	`+function createSource(image: ImageAttrs, index: number): ReactElement {`
	`25`	`+ return <source media={image.media} srcSet={image.url} key={index} />;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`export const ResponsiveImage: ReactComponent<ResponsiveImageProps> = ({`