Test

src/components/Tinder/Tinder.js

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import TinderCard from 'react-tinder-card';
 import './Tinder.css';
 
@@ -29,13 +29,17 @@ const db = [
 
     const route = props.getValue;
 
-    const characters = db;
+    useEffect(() => {
+        console.log(characters[0])
+    });
+
+    const characters = props.cardData;
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
     const [allIds, setAllIds] = useState([]);
     const [cardLenth, setCardLenth] = useState(false);
 
-    let uniqueTags = [];
+    let uniqueTags = [...characters];
     let allTags = [];
 
     const swiped = (direction, id) => {
@@ -48,20 +52,20 @@ const db = [
 
     const getId = () => {
 
-        uniqueTags = cardId.filter(function(elem, pos) {
-            return cardId.indexOf(elem) === pos;
-        });
+        // uniqueTags = cardId.filter(function(elem, pos) {
+        //     return cardId.indexOf(elem) === pos;
+        // });
 
-        allTags = allIds.filter(function(elem, pos){
-            return allIds.indexOf(elem) === pos;
-        });
+        // allTags = allIds.filter(function(elem, pos){
+        //     return allIds.indexOf(elem) === pos;
+        // });
 
-        characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
+        // characters.length === allTags.length ? setCardLenth(true) : setCardLenth(false);
 
-        if(cardLenth) {
-            route('/map')
-        }
-        
+        // if(cardLenth) {
+        //     route('/map')
+        // }
+        console.log(uniqueTags);
     }
   
     return (
@@ -81,9 +85,9 @@ const db = [
                 <div className='card'>
                     <div
                     className='card-content'
-                    // style={{ backgroundImage: `url(${character.url})` }}
+                    // style={{ backgroundImage: url(${character.url}) }}
                     >
-                    <h3>{character.name}</h3>
+                    <h3>{props.character.question}</h3>
                     </div>
                 </div>
                 </TinderCard>
@@ -93,4 +97,4 @@ const db = [
     );
   };
   
-  export default Tinder;
+  export default Tinder;