Slideshow block: Modifying Slideshow block key indexes to prevent sam…

…e key notice (#39821)
Automattic · Oct 21, 2024 · 8a7e99f · 8a7e99f
1 parent 712c563
commit 8a7e99f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-slideshow-block-global-styles b/projects/plugins/jetpack/changelog/fix-slideshow-block-global-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Slideshow block: fix console warning related to images with the same key.
diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js b/projects/plugins/jetpack/extensions/blocks/slideshow/slideshow.js
@@ -136,14 +136,14 @@ class Slideshow extends Component {
 					ref={ this.slideshowRef }
 				>
 					<ul className="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper">
-						{ images.map( ( { alt, caption, id, url } ) => (
+						{ images.map( ( { alt, caption, id, url }, index ) => (
 							<li
 								className={ clsx(
 									'wp-block-jetpack-slideshow_slide',
 									'swiper-slide',
 									isBlobURL( url ) && 'is-transient'
 								) }
-								key={ id ? id : url }
+								key={ id ? `${ id }-${ index }` : `${ url }-${ index }` }
 							>
 								<figure>
 									<img