score:2

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.

score: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>
    );
}

Related Query

More Query from same tag