react. trying to call custom hook from onClick event

Question

im trying to make a button to logout the user and move the logic to a custom hook useLogout.js .

Menu.js

import useLogout from './useLogout';
import UserContext from './UserContext';
import TokenContext from './TokenContext';

function Menu() {
    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

/*  some code....*/
 let button;

    if (token && token.access_token && user) {
        button = <Button onClick={useLogout}>Logout</Button>;
    } else {
        button = <Button>Login</Button>;
    }

/* some code.... */
    return(
      <Nav.Link>
          {button}
      </Nav.Link>
    )
}

useLogout.js

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

export default function useLogout() {

    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

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

when i run this and click the button i get this error: Invalid hook call. Hooks can only be called inside of the body of a function component error in: export default function useLogout() { const [user, setUser] = useContext(UserContext);

so i tought that i was calling wrong to the function useLogout so i modified my code calling onClick={useLogout()} instead of onClick={useLogout} so the line looks like this:

button = <Button onClick={useLogout()}>Logout</Button>;

but then i get this error: React Hook "useLogout" is called conditionally. React Hooks must be called in the exact same order in every component render

even i tried:

button = <Button onClick={() => useLogout}>Logout</Button>;

how can i modified my code so when i click the button the function useLogout from useLogout.js is executed?

Answer 1

what you want is probably something like this:

export default function useLogout() {

    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

    return () => {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      setToken();
      setUser();
    }
};

/

const logoutCb = useLogout();

button = <Button onClick={logoutCb}>Logout</Button>;