0

Problem:

Hi I'm a beginner in React JS, I was Following a YouTube Tutorial on making a Tinder Clone. I followed the exact steps but still got this error and I'm stuck here. I have searched almost everywhere but cant figure out what is the issue.

Solutions I've tried:

  1. Updating all packages
  2. Reinstalling react-tinder-cards
  3. Read other questions related to this issue.

but still confused what the issue is

Code:

import React, { useState } from 'react'
import TinderCard from 'react-tinder-card'
import "./TinderCards.css"


function TinderCards() {
    const [people, setPeople] = useState([
        {
            name: "Elon Musk",
            url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg/220px-Elon_Musk_Royal_Society_%28crop1%29.jpg'

        },
        {
            name: "Jeff Bezos",
            url: 'https://en.wikipedia.org/wiki/File:Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_(39074799225)_(cropped).jpg'

        },
    ])

    const swiped = (direction, nameToDelete) => {
        console.log("removing: " + nameToDelete)
        // setLastDirection(direction)
    }

    const outOfFrame = (name) => {
        console.log(name + "left the screen!")
    }

    return (
        <div className="tinderCards">
            <div className="tinderCards__cardContainer">
                {people.map((person) => (
                    < TinderCard
                        className="swipe"
                        key={person.name}
                        preventSwipe={["up", "down"]}
                        onswipe={(dir) => swiped(dir, person.name)}
                        onCardLeftScreen={() => outOfFrame(person.name)}
                    ></TinderCard>
                ))}
            </div>
        </div>
    )
}

export default TinderCards

Error:

Error

Solved ✅

The error is fixed. Just restarted the project next day and the error vanished. I would like to thank you all very much for trying to help me by devoting your valuable time in writing these comments.

Pritam Kundu
  • 3
  • 4
  • Please show the 2nd error as well. Can you also show where you are using your TinderCards component? – Suyash Gulati Oct 06 '21 at 10:12
  • Does this answer your question? [Invalid hook call. Hooks can only be called inside of the body of a function component](https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com) – DarkBee Oct 06 '21 at 10:12
  • 1
    the only hook you are using in this code is useState and it is used within you component, so maybe this error is regarding another file? also don't know if it's there is a space after the component name tag like so < TinderCard not sure if it's just a typo – Guy Perry Oct 06 '21 at 10:15
  • Agreed with @GuyPerry. There is no issue with using a hook in this component. The issue might be arising from some other component. To debug, just remove wherever you are using this component from and check if you still have the error! – Suyash Gulati Oct 06 '21 at 10:19
  • The error originates in the `TinderCard` component, not `TinderCards`. Can you show the code for that? – tromgy Oct 06 '21 at 10:28
  • @SuyashGulati Whenever I remove the Usage of TinderCard component in my program this issue vanishes and program works fine , whenever I add this part again it shows the error ... So it is happening for the TinderCard Component only. – Pritam Kundu Oct 06 '21 at 12:51
  • No @DarkBee I've already read this solution and didn't get how this solves my problem :( – Pritam Kundu Oct 06 '21 at 12:52
  • Guys .. the error is fixed... I just restarted the next day and hopefully the error vanished ... It's totally unbelievable at the first time but I would like to thank you all very much for trying to help me by devoting your valuable time in writing these comments ... It's for you only that I was successful in completing the project which I lost motivation that day – Pritam Kundu Oct 07 '21 at 16:31

0 Answers0