title: React: Invalid hook call. Hooks can only be called inside of the body of a function component
body: <p>i have spent 2 days trying to understand where is the mistake, any idea?</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { useState, useEffect} from 'react';
  import Menu from './components/Menu';
  
  
  function App() {  
  
      return (
          &lt;Menu&gt;&lt;/Menu&gt;    
      );
  }
  
  export default App;
  </code></pre>
  
  <p>Menu.js</p>
  
  <pre><code>import React, { useState, useContext } from 'react';
  import Logout from './Logout';
  
  
  function Menu() {
      return (
          &lt;button onClick={() =&gt; Logout()}&gt;button&lt;/button&gt;
      );
  }
  
  export default Menu;
  </code></pre>
  
  <p>Logout.js</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>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</p>
  
  <p>the error is in:
  Invalid hook call. Hooks can only be called inside of the body of a function component.</p>
  
  <pre><code>  18 | 
    19 | 
  &gt; 20 | export function Logout() {
    21 | 
    22 |  const [user, setUser] = useState();
    23 |  const [token, setToken] = useState();
  </code></pre>