React: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

i have spent 2 days trying to understand where is the mistake, any idea?

App.js

import React, { useState, useEffect} from 'react';
import Menu from './components/Menu';


function App() {  

    return (
        <Menu></Menu>    
    );
}

export default App;

Menu.js

import React, { useState, useContext } from 'react';
import Logout from './Logout';


function Menu() {
    return (
        <button onClick={() => Logout()}>button</button>
    );
}

export default Menu;

Logout.js

import React, { useContext, useState } from 'react';
export function Logout() {

    const [user, setUser] = useState();
    const [token, setToken] = useState();

    localStorage.removeItem("token");
    localStorage.removeItem("user");
    setToken();
    setUser();
}

export default Logout;

im using the hooks on top of a function (Logout()) so i dont know what happens. maybe because im nesting components? because if i move the code from logout.js to menu.js it works but im trying to move the function to other file so i can use it in more components

the error is in: Invalid hook call. Hooks can only be called inside of the body of a function component.

  18 | 
  19 | 
> 20 | export function Logout() {
  21 | 
  22 |  const [user, setUser] = useState();
  23 |  const [token, setToken] = useState();

Your logout component didn't return a data. You can transform it to custom hook — demkovych, Sep 17 '19 at 09:30
I think `Logout` should be the pure JS function and not the component, try to remove `useState` and it's setter from `Logout` component. — ravibagul91, Sep 17 '19 at 09:37
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) — Aryan Beezadhur, Sep 15 '21 at 20:13

score 3 · Answer 1 · answered Sep 17 '19 at 09:33

3

function Menu() {
    const [user, setUser] = useState('');
    const [token, setToken] = useState('');

    const logout = () => {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      setToken('');
      setUser('');
    }

    return (
        <button onClick={() => logout()}>button</button>
    );
}

answered Sep 17 '19 at 09:33

demkovych

7,827
3
19
25

the problem is that Logout is a function (not react component) and you can't define react hooks inside function – demkovych Sep 17 '19 at 09:37

Dennis Vash · Answer 2 · 2019-09-17T09:43:32.137

Calling onClick callback like this:

<button onClick={() => Logout()}>button</button>

Is equivariant to:

const anynomousFunc = () => {
  // Logout()
  const [user, setUser] = useState();
  const [token, setToken] = useState();

  localStorage.removeItem('token');
  localStorage.removeItem('user');
  setToken();
  setUser();
};

But notice that anynomousFunc is not a react component, which leads to:

Invalid hook call. Hooks can only be called inside of the body of a function component.

// Examples of equivalent (but not valid) calls with react components
<div attribute={<Logout/>}>Example</div>
<div attribute={Logout()}>Example</div>

To fix this, depending on your application logic, create a custom hook which will return a function and use it.

React: Invalid hook call. Hooks can only be called inside of the body of a function component

2 Answers2

Linked