Cannot destructure property of object from context

Question

Re-posting a similar question to my last because of a new issue. I'm trying to use context with hooks to manage authentication in my react app. I'm getting the error TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as it is undefined., yet when I console.log the property where it's defined, I see false not undefined.

I have the context definition and provider in authContext.js

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

const AuthContext = createContext();
export { AuthContext };

const AuthContextProvider = (props) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const setAuth = (boolean) => {
    setIsAuthenticated(boolean);
  };

  const apiOptions = {
    url: "users/is-verified",
    method: "GET",
    headers: {
      token: localStorage.token,
    },
  };

  function isAuth() {
    axios(apiOptions)
      .then((response) => {
        console.log("auth ran");
        const resData = response.data;
        resData === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

  useEffect(() => {
    isAuth();
  }, []);
  console.log(isAuthenticated);
  return (
    <AuthContext.Provider
      value={{ isAuthenticated, setIsAuthenticated, setAuth }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

Then I have my routes wrapped in the provider in app.js

import React from "react";
import {
  Switch,
  Route,
} from "react-router-dom";
import "./App.css";
import Register from "./components/pages/register";
import AuthContextProvider from "./components/context/authContext";
import RegisterRoutes from "./components/routing/registerRoutes";

function App() {

  return (
    <AuthContextProvider>
      <div className="App h-100 ">
        <Switch>
          <Route
            exact
            path="/register"
            render={(props) => (
              <RegisterRoutes {...props} />
            )}
          />
        </Switch>
      </div>
    </AuthContextProvider>
  );
}

export default App;

Then I have a RegisterRoutes component that returns one of two pages based on the isAuthenticated value

import React, { useContext } from "react";
import AuthContext from "../context/authContext";
import { Redirect } from "react-router-dom";
import Register from "../pages/register";

function RegisterRoutes(props) {
  const { isAuthenticated, setAuth } = useContext(AuthContext);
  console.log(isAuthenticated);

  return !isAuthenticated ? (
    <Register {...props} setAuth={setAuth} />
  ) : (
    <Redirect to="/login" />
  );
}

export default RegisterRoutes;

taseenb · Accepted Answer · 2020-06-14 22:27:53Z

12

Your default export is AuthContextProvider (a component), not AuthContext (a context object): that won't work as you expect. Furthermore you are trying to export the context object inside another object:

// WRONG: export context inside {}
const AuthContext = createContext();
export { AuthContext };

Solution 1

Instead export the context variable normally (not as default):

// Export the variable
export const AuthContext = createContext();

// This works
import { AuthContext } from "../context/authContext";

Solution 2 (recommended)

A better practice is to keep the context in a separate file and export it as default:

// File AuthContext.js

import React, { createContext } from "react";

const AuthContext = createContext();

export default AuthContext;

// Import it in another file
import AuthContext from "./AuthContext.js";

edited Jun 14, 2020 at 22:27

answered Jun 14, 2020 at 22:22

taseenb

1,4331 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

userNick Over a year ago

Thank you! I implemented your solution 2 and it works. That makes sense and I like keeping the two in separate files.

shapiro yaacov · Accepted Answer · 2021-01-26 05:20:25Z

6

I solved this by doing a simple thing. In index, react-app, just put my provider involving my App.

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

I have the same problem when I try set logging in localStorage.

edited Jan 26, 2021 at 5:20

shapiro yaacov

2,3462 gold badges31 silver badges40 bronze badges

answered Jan 26, 2021 at 3:44

DevWeb-Thiago

611 silver badge2 bronze badges

Comments

MrSegFaulty · Accepted Answer · 2021-01-27 04:05:32Z

2

For people using gatsby and context API in the page component:

you need to wrap root element with context provider in gatsby-browser.js and in gatsby-ssr.js.

Example:

import React from 'react';

import { CustomProvider } from './src/context/CustomProvider';

export const wrapRootElement = ({ element }) => {
  return <CustomProvider>{element}</CustomProvider>;
};

answered Jan 27, 2021 at 4:05

MrSegFaulty

5576 silver badges10 bronze badges

Comments

Sonal Kumawat · Accepted Answer · 2021-10-07 11:40:07Z

0

Try in your App.js define the value = {{state, dispatch}} in provider

 <UserContext.Provider value ={{state, dispatch}}>
        <Routing/>
      </UserContext.Provider>

answered Oct 7, 2021 at 11:40

Sonal Kumawat

211 bronze badge

Comments

Muhammad Dyas Yaskur · Accepted Answer · 2021-12-07 22:08:43Z

0

you must put this {} for wrape the context during the send in other file

import {AuthContext} from "../context/authContext";

import { Redirect } from "react-router-dom";

import Register from "../pages/register";

function RegisterRoutes(props) {

  const { isAuthenticated, setAuth } = useContext(AuthContext);

edited Dec 7, 2021 at 22:08

Muhammad Dyas Yaskur

8,35811 gold badges62 silver badges91 bronze badges

answered Dec 7, 2021 at 17:28

Hermann Mohou

1

Comments

Anurag A S · Accepted Answer · 2022-01-04 19:40:28Z

0

This is the way I solved it, wrapping all the component in app.js file with authProvider.

edited Jan 4, 2022 at 19:40

Anurag A S

75112 silver badges26 bronze badges

answered Jan 1, 2022 at 2:16

Ruhul Amin

376 bronze badges

Comments

Riya Sharma · Accepted Answer · 2023-03-28 17:00:24Z

My error was resolved once I added the AuthState in my App.js file.

import { Routes, Route } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";
import Home from "./screens/Home";
import "./index.css";

import Register from "./components/Register";
import Login from "./components/Login";
import AuthState from "./context/auth/AuthState";
function App() {
  return (
    <>
      <AuthState>
          <Router>
            <Navbar />
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/register" element={<Register />} />
              <Route exact path="/login" element={<Login />} />
            </Routes>
          </Router>
      </AuthState>
    </>
  );
}

export default App;

HelloTy · Accepted Answer · 2023-09-09 01:02:50Z

0

In my case, I was using a custom hook with a property dependent on useContext which I was never exposing to the route. Don't forget to wrap your components with context providers!

answered Sep 9, 2023 at 1:02

HelloTy

756 bronze badges

Comments

Veerendra Hullatti · Accepted Answer · 2023-12-07 06:08:15Z

0

This is works for me

    <BrowserRouter>
    <AppContext>
        <Header/>
        <Routes>
            <Route path="/" element={<Home/>} />
            <Route path="/category/:id" element={<Category />} />
            <Route path="/product/:id" element={<SingleProduct />} />
        </Routes>
        <Newsletter />
        <Footer />
    </AppContext>
</BrowserRouter>

answered Dec 7, 2023 at 6:08

Veerendra Hullatti

712 bronze badges

Collectives™ on Stack Overflow

Cannot destructure property of object from context

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related