Error: Invalid hook call.

[warmachine028]

Hi ! I am a beginner in ReactJs, Today I was following a Youtube Tutorial on how to create a Tinder App and I Got Stuck in this Error, When I remove the following Code block from the Code the app works fine:

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

But Whenever I add it back I Get this Error:

This is my 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

Any Help would be highly appreciated

[3DJakob]

Interesting I have actually seen the exact same issue but for the useParams hook from react-router-dom.
I think the issue is related to this facebook/react#14257

The way I managed to solve the problem for them was to:

1. Make a copy of your folder
2. Delete your project folder
3. Create a new react app with npx create-react-app YOURAPPNAME
4. Copy the folder src from your old folder to the new project.
5. Run yarn add PACKAGENAME for all packages you had used.
6. Run yarn start

From what I have understood this seems to be an issue with mixing npm and yarn.

For some people simply deleting the lock files and node_modules and redownloading them worked but it didn't work for the people I helped with this.

I hope this helps!

[3DJakob]

I'm closing this issue since I proposed a solution and a few days have passed. Feel free to open this issue if the problem persists.