From ae1e2f1f30c665c7d6dfcf3cc3721d1ccdb706a1 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 11 May 2024 23:04:53 -0300
Subject: [PATCH] feat: add keys to lists on galler-slider

---
 src/renderer/src/pages/game-details/gallery-slider.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/game-details/gallery-slider.tsx b/src/renderer/src/pages/game-details/gallery-slider.tsx
index 87eafb8f..99c436ef 100644
--- a/src/renderer/src/pages/game-details/gallery-slider.tsx
+++ b/src/renderer/src/pages/game-details/gallery-slider.tsx
@@ -63,8 +63,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
             className={styles.gallerySliderAnimationContainer}
           >
             {gameDetails.movies &&
-              gameDetails.movies.map((video: SteamMovies) => (
+              gameDetails.movies.map((video: SteamMovies, i: number) => (
                 <video
+                  key={"video-" + i}
                   controls
                   className={styles.gallerySliderMedia}
                   poster={video.thumbnail}
@@ -74,8 +75,9 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
                 </video>
               ))}
             {gameDetails.screenshots &&
-              gameDetails.screenshots.map((image: SteamScreenshot) => (
+              gameDetails.screenshots.map((image: SteamScreenshot, i: number) => (
                 <img
+                  key={"image-" + i}
                   className={styles.gallerySliderMedia}
                   src={image.path_full}
                   style={{ translate: `${-100 * mediaIndex}%` }}
@@ -105,6 +107,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
             {gameDetails.movies &&
               gameDetails.movies.map((video: SteamMovies, i: number) => (
                 <img
+                  key={"video-thumb-" + i}
                   onClick={() => setMediaIndex(i)}
                   src={video.thumbnail}
                   className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
@@ -114,6 +117,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
               gameDetails.screenshots.map(
                 (image: SteamScreenshot, i: number) => (
                   <img
+                    key={"image-thumb-" + i}
                     onClick={() =>
                       setMediaIndex(
                         i + (gameDetails.movies ? gameDetails.movies.length : 0)