title: typeerror: cannot destructure property 'user' of '(0 , react__webpack_imported_module_0__.usecontext)(...)' as it is undefined
body: <p>I am working on this project and suddenly this error appeared in chrome's console.log <code>typeerror: cannot destructure property 'user' of '(0 , react__webpack_imported_module_0__.usecontext)(...)' as it is undefined.</code>and im a bit stuck on how to solve this. I double check everything and i didnt see what's the problem.</p>
  <p>Here is my App.js</p>
  <pre><code>import AppNavBar from './components/AppNavBar'
  import './App.css';
  import  {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
  import Home from './pages/Home'
  import Register from './pages/Register'
  import Login from './pages/Login'
  import Logout from './pages/Logout'
  import Error from './pages/Error'
  import {UserProvider} from './UserContext'
  import {useState, useEffect} from 'react';
  function App() {
    const [user, setUser] = useState({
      id: null,
      isAdmin: null
    })
  const unsetUser = () =&gt; {
    localStorage.clear()
    setUser({
      id:null,
      isAdmin: null
    })
  }
  useEffect(()=&gt;{
    let token = localStorage.getItem('accessToken');
      // console.log(token)
      fetch('https://e-commerce-capstone-2.herokuapp.com/users/details',{
        headers:{
          Authorization: `Bearer ${token}`
        }
      }).then(res =&gt;res.json()).then(convertedData =&gt;{ 
        // console.log(convertedData)
  
        if (typeof convertedData._id !== &quot;undefined&quot;) {
            setUser({
              id: convertedData._id,
              isAdmin: convertedData.isAdmin
            });
           // console.log(user)
      } else {
          setUser({
            id: null,
            isAdmin: null
          })
        }
      })
      
  },[user])
    return (
     
      &lt;Router&gt;
      &lt;AppNavBar/&gt;
      &lt;Routes&gt;
      &lt;Route path= '/' element={&lt;Home/&gt;} /&gt;
      &lt;Route path= '/register' element={&lt;Register/&gt;} /&gt;
      &lt;Route path= '/login' element={&lt;Login/&gt;} /&gt;
      &lt;Route path= 'logout' element={&lt;Logout/&gt;}/&gt;
       &lt;Route path= '*' element={&lt;Error/&gt;} /&gt;
      }
      }
      &lt;/Routes&gt;
      &lt;/Router&gt;
      
    
     
  
    );
  }
  
  export default App;
  </code></pre>
  <p>Here is my Navbar component</p>
  <pre><code>import {useContext} from 'react'
  import {Navbar, Nav, Container,Image,NavDropdown} from 'react-bootstrap'
  import {Link} from 'react-router-dom'
  import UserContext from '../UserContext'
  
  function AppNavBar(){
      const {user} = useContext(UserContext)
      return(
              &lt;Navbar className='Navbar fs-1' expand='lg' variant='light'&gt;
              &lt;Container&gt;
              &lt;Navbar.Brand&gt;&lt;Image className='backgroundlogo ml-auto' src='logo.png' fluid style={{height:'200px',width:'200px'}}/&gt;&lt;/Navbar.Brand&gt;
              &lt;Navbar.Toggle aria-controls = &quot;responsive-navbar-nav&quot; /&gt;
              &lt;Navbar.Collapse &gt;
              
              &lt;Nav className='ml-auto'&gt;
              &lt;Link to ='/' className='nav-link'&gt;Home&lt;/Link&gt;
              {user.id !== null ?
                  &lt;Link to ='/logout' className='nav-link'&gt;Logout&lt;/Link&gt;
                  :
              
                  &lt;&gt;
                  &lt;Link to ='/login' className='nav-link'&gt;Login&lt;/Link&gt;
                  &lt;Link to ='/register' className='nav-link'&gt;Register&lt;/Link&gt;
                  &lt;/&gt;
                  }
                  
              &lt;NavDropdown  title = 'Products' className='NavDropdown'&gt;
                          
                  &lt;NavDropdown.Item&gt;
                  &lt;Link  to ='/products' className='nav-link'&gt;Overview&lt;/Link&gt;
                  &lt;/NavDropdown.Item&gt;                     
                  &lt;NavDropdown.Item&gt;
                  &lt;Link  to ='/products/add' className='nav-link'&gt;Add Products&lt;/Link&gt;
                  &lt;/NavDropdown.Item&gt; 
                  &lt;NavDropdown.Item&gt;
                  &lt;Link  to ='/products/update' className='nav-link'&gt;Update Products&lt;/Link&gt;
                  &lt;/NavDropdown.Item&gt;
                  
  
              &lt;/NavDropdown&gt;
                  &lt;Link to ='/products/addtocart' className='nav-link'&gt;Buy Now&lt;/Link&gt;
              &lt;/Nav&gt;
              &lt;/Navbar.Collapse&gt;              
              &lt;/Container&gt;
  
              &lt;/Navbar&gt;
          )
  }
  export default AppNavBar;
  </code></pre>
  <p>for more info, here is the gitlab link of the project:
  <a href="https://gitlab.com/zekevergara/projects/e-commerce/e-commerce" rel="nofollow noreferrer">https://gitlab.com/zekevergara/projects/e-commerce/e-commerce</a></p>