CODEWITHSUNDEEP
reactjsreact-hooksreact-routerfrontend
Cyborg7459
Cyborg7459

Reputation: 167

Cannot call useParams hook

I am trying to use the useParams() hook in one of my functions in React but it gives the following error

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a 
function component. This could happen for one of the following reasons: 
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The React component where I'm trying to call useParams() looks like this

const IndividualEvent = () => {
const [showError, setShowError] = useState(false);
const [event, setEvent] = useState(null);
const [showLoader, setShowLoader] = useState(true);

const Fetchevent = () => {
    const {eventName} = useParams();
    alert(eventName);
}

useEffect(() => {
    Fetchevent();
})

return (
    <div id="individual-event">
        {
            showLoader ? <Loader text='Fetching event details'/> : null
        }
        <Sidebar />
        <div id="event-container" className="page">

        </div>
    </div>
)

}

What is the error here and how to solve it

Upvotes: 2

Views: 3784

Answers (2)

solomon Yunana
solomon Yunana

Reputation: 439

Remove useParams from inside the Fetchevent arrow function, react doesn not recognize the arrow function as a react function, put it directly on the top level like the useState you have. One of the rules of hooks is that you should not use hooks inside nexted functions, thats where the issue is comming from. Your code should look like this

const IndividualEvent = () => {
const [showError, setShowError] = useState(false);
const [event, setEvent] = useState(null);
const [showLoader, setShowLoader] = useState(true);
const {eventName} = useParams(); // this line was moved here

const Fetchevent = () => {
    alert(eventName);
}

useEffect(() => {
    Fetchevent();
})

return (
    <div id="individual-event">
        {
            showLoader ? <Loader text='Fetching event details'/> : null
        }
        <Sidebar />
        <div id="event-container" className="page">

        </div>
    </div>
)

Upvotes: 5

Ergophobia
Ergophobia

Reputation: 101

You might be using a version of react-dom (< 16.8.0) or react-native (< 0.59) that doesn’t yet support Hooks. try run

npm ls react-dom

or

npm ls react

in your application folder to check which version you’re using. If you find more than one of them, this might also create problems. If you see more than one, you can debug this problem by adding some logs and restarting your development server:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

If it prints false then you might have two Reacts and need to figure out why that happened.

This issue includes some common reasons encountered by the community.

Upvotes: 0

Related Questions