id fix

src/components/Start/Start.js

@@ -12,7 +12,6 @@ const Start = (props) => {
             flexWrap: 'wrap',
             justifyContent: 'space-between',
             height: '95vh',
-            backgroundImage: '../../data/img/Rectangle 27.png',
         }}>
             <img src="" alt="Icon"/>
             <button onClick={() => route('/')}>Начать</button>

src/components/Tinder/Tinder.css

@@ -1,5 +1,3 @@
-/* Tinder.css */
-
 .tinder-container {
     margin-top: 30%;
     height: 50vh;
@@ -9,7 +7,7 @@
     align-items: center;
     flex-direction: column;
     overflow: hidden;
-
+    background-color: #fff;
   }
   
   .card-container {
@@ -18,6 +16,7 @@
     height: 80px;
     width: 120px;
     flex-direction: column;
+    background-color: #fff;
   }
   
   .swipe {
@@ -50,13 +49,14 @@
     flex-direction: column;
     justify-content: flex-end;
     align-items: flex-end;
+    align-content: center;
+    flex-wrap: wrap;
     padding: 16px;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
-
+    background-color: #fff;
   }
   
   .card-content {
-    background-color: rgba(255, 255, 255, 0.8);
     border-radius: 10px;
     padding: 8px;
     text-align: center;

src/components/Tinder/Tinder.js

@@ -4,22 +4,27 @@ import './Tinder.css'
 
 const db = [
     {
+        id: 1,
         name: 'Richard Hendricks',
         url: './img/richard.jpg'
     },
     {
+        id: 2,
         name: 'Erlich Bachman',
         url: './img/erlich.jpg'
     },
     {
+        id: 3,
         name: 'Monica Hall',
         url: './img/monica.jpg'
     },
     {
+        id: 4,
         name: 'Jared Dunn',
         url: './img/jared.jpg'
     },
     {
+        id: 5,
         name: 'Dinesh Chugtai',
         url: './img/dinesh.jpg'
     }
@@ -28,36 +33,38 @@ const db = [
   const Tinder = () => {
     const characters = db;
     const [lastDirection, setLastDirection] = useState();
+    const [cardId, setCardId] = useState([]);
   
-    const swiped = (direction, nameToDelete) => {
+    const swiped = (direction, nameToDelete, id) => {
       console.log('removing: ' + nameToDelete);
       setLastDirection(direction);
+      if (direction === 'right') {
+        cardId.push(id);
+      };
+      console.log(cardId);
     };
   
     const outOfFrame = (name) => {
       console.log(name + ' left the screen!');
     };
 
+    let uniqueTags = [];
+    const getId = () => {
+        uniqueTags = cardId.filter(function(elem, pos) {
+            return cardId.indexOf(elem) === pos;
+        })
+        console.log(uniqueTags)
+    }
+  
     return (
       <div className='tinder-container'>
-        {/* <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            width: '100%',
-            alignContent: 'center',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
-            alignItems: 'center',
-            background: 'white',
-        }}> */}
             <h1>Card</h1>
             <div className='card-container'>
             {characters.map((character) => (
                 <TinderCard
                 className='swipe'
-                key={character.name}
-                onSwipe={(dir) => swiped(dir, character.name)}
+                key={character.id}
+                onSwipe={(dir) => swiped(dir, character.name, character.id)}
                 onCardLeftScreen={() => outOfFrame(character.name)}
                 >
                 <div className='card'>
@@ -74,10 +81,10 @@ const db = [
             {lastDirection ? (
             <h2 className='infoText'>You swiped {lastDirection}</h2>
             ) : (
-            <h2 className='infoText' />
+            null
             )}
+            <button onClick={() => getId()}>Вывести массив</button>
         </div>
-    //   </div>
     );
   };