From 1326a6da7181d4910798c6c9785b1ab6a52cddfc Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 23 Jun 2022 15:18:17 +0500
Subject: [PATCH] uuidv4 implemented for react keys

---
 package-lock.json                     | 29 +++++++++++++++++++++++++++
 package.json                          |  1 +
 src/components/main/EventsSection.tsx |  5 +++--
 src/components/main/MainSlider.tsx    |  5 +++--
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe18d9b..20e3f67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "react-scripts": "5.0.1",
         "swiper": "^8.2.4",
         "typescript": "^4.7.4",
+        "uuidv4": "^6.2.13",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3883,6 +3884,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -17051,6 +17057,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/uuidv4": {
+      "version": "6.2.13",
+      "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz",
+      "integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==",
+      "dependencies": {
+        "@types/uuid": "8.3.4",
+        "uuid": "8.3.2"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -20718,6 +20733,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -30189,6 +30209,15 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
+    "uuidv4": {
+      "version": "6.2.13",
+      "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz",
+      "integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==",
+      "requires": {
+        "@types/uuid": "8.3.4",
+        "uuid": "8.3.2"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index 559abb2..0b6d5dc 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-scripts": "5.0.1",
     "swiper": "^8.2.4",
     "typescript": "^4.7.4",
+    "uuidv4": "^6.2.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx
index ad5b529..51a6bbc 100644
--- a/src/components/main/EventsSection.tsx
+++ b/src/components/main/EventsSection.tsx
@@ -1,4 +1,5 @@
 // Modules
+import { v4 as uuidv4 } from "uuid";
 
 // Components
 import SectionTitle from "../global/SectionTitle";
@@ -58,10 +59,10 @@ const EventsSection = () => {
         <div className="events-inner">
           <SectionTitle title="События и новости" />
           <div className="events-content">
-            {eventsData.map((evnt, id) => {
+            {eventsData.map((evnt) => {
               return (
                 <Event
-                  key={id}
+                  key={uuidv4()}
                   image={evnt.image}
                   text={evnt.text}
                   time={evnt.time}
diff --git a/src/components/main/MainSlider.tsx b/src/components/main/MainSlider.tsx
index a98a2b8..07946c6 100644
--- a/src/components/main/MainSlider.tsx
+++ b/src/components/main/MainSlider.tsx
@@ -2,6 +2,7 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Navigation } from "swiper";
 import "swiper/css";
+import { v4 as uuidv4 } from "uuid";
 
 // Images
 import game from "../../images/slider-img.jpg";
@@ -39,9 +40,9 @@ const MainSlider = () => {
           prevEl: ".slider-prev",
         }}
       >
-        {sliderData.map((slide, id) => {
+        {sliderData.map((slide) => {
           return (
-            <SwiperSlide key={id}>
+            <SwiperSlide key={uuidv4()}>
               <MainSliderSlide
                 slideImg={slide.slideImg}
                 slideLink={slide.slideLink}