React - Error: Invalid hook call. Hooks can only be called inside of the body of a function component. What is wrong my syntax?

To give a little background:

I'm trying to build a Login Form Page function that detects if the user is already logged. If they are logged in, then a button will appear prompting the user to log out. Like so: {user ? userLoggedInAlert() : SignIn()} If user is True, then the button appears, if user is false, then they receive the username and password form for login authentication.

I have nailed down all the functionality. However, when I press on button to logout the user out, I receive this error:

×  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  See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.  

Here is my code, I think there is something wrong with the const userLoggedInAlert

function LoginUser()  {      const user = useSelector(selectUser);        const dispatch = useDispatch();        const handleLogout = (e) =>      {          if(e) e.preventDefault();            dispatch(logout());      };        const userLoggedInAlert = () =>      {          return <Container>              <span>                  You are already logged in!              </span>              <Button                  component={NavLink}                  variant="contained"                  color="primary"                  to="/logout"                   onClick={function(){ LogOut(); handleLogout()}}              >                  Do you want to logout?              </Button>                  </Container>          };        return (          <Container>              {user ? userLoggedInAlert() : SignIn()}          </Container>      );  }  export default LoginUser;  

• SignIn() works just fine, so does my useDispatch, and other components necessary to create the code above. I'm pretty sure I just messed up the syntax somewhere in the code above?

Here is my code to LogOut(), note that I can logout just fine through other means using this exact same component.

import React, { useEffect } from 'react';  import axiosInstance from '../../axios';  import { useHistory } from 'react-router-dom';    export default function LogOut() {            const history = useHistory();          useEffect(() => {          const response = axiosInstance.post('user/logout/blacklist/', {              refresh_token: localStorage.getItem('refresh_token'),          });          localStorage.removeItem('access_token');          localStorage.removeItem('refresh_token');          axiosInstance.defaults.headers['Authorization'] = null;          history.push('/login');      });      return <div>Logout</div>;  };  

Thank you for any help, I'm stuck here.

https://stackoverflow.com/questions/66056529/react-error-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of February 05, 2021 at 09:55AM