Why useContext return undefined?

Question

I have an issue that is useContext return undefined value.

I create a context for collapsing menu like toggle menu. Afterward I added provider into index file to wrap Main component. I go to Main file import CollapseContext but this is file it's not work :( ?

I don't understand why it return undefined.

Below is my code.

src/context/CollapseMenuContext.js

import React, { createContext, useState } from 'react'
export const CollapseContext = createContext()
export default function CollapseProvider({ children }) {
 const [isCollapse, setIsCollapse] = useState(false)
 const toggleCollapse = () => {
 setIsCollapse(!isCollapse)
 }
 const values = {
 isCollapse,
 toggleCollapse,
 }
 return <CollapseContext.Provider value={values}>{children}</CollapseContext.Provider>
}

src/app/index.jsx

import React from 'react'
import Header from '_components/Header'
import CollapseProvider from '../context/CollapseMenuContext.js'
import MainDigistallDesktop from './Main'
function DigistallDesktop() {
 return (
 <CollapseProvider>
 <Header />
 <section className='section-content section-content--top mains-screen pb-0' id='checkHeight'>
 <MainDigistallDesktop />
 </section>
 </CollapseProvider>
 )
}
export default DigistallDesktop

src/app/Main.jsx

import React, { useContext } from 'react'
import { Route, Switch } from 'react-router-dom'
import OrderRecord from './OrderRecord'
import Sidebar from './components/Sidebar/index'
import Dashboard from './Dashboard'
import Delivery from './Delivery'
import Products from './Products'
import Setting from './Setting'
import { CollapseContext } from '../context/CollapseMenuContext.js'
function MainDigistallDesktop() {
 const context = useContext(CollapseContext)
 console.info(context)
 return (
 <div className='container-fluid' style={{ minWidth: '1200px' }}>
 <div className='row'>
 {/* <div className={`${isCollapse ? 'col-1' : 'col-2'} position-relative`}>
 <Sidebar />
 </div> */}
 <div className='col-10 mx-auto'>
 <Switch>
 <Route path='/' exact component={Dashboard} />
 <Route path='/order-records' exact component={OrderRecord} />
 <Route path='/delivery' exact component={Delivery} />
 <Route path='/products' exact component={Products} />
 <Route path='/setting' exact component={Setting} />
 </Switch>
 </div>
 </div>
 </div>
 )
}
export default MainDigistallDesktop

result: enter image description here

Eidt 1: This is root app file:

export default function App() {
 if (process.env.REACT_APP_ENVIRONMENT === 'production') useScript()
 return (
 <Provider store={store}>
 <ToastProvider>
 <FirebaseContext.Provider value={{ firebase }}>
 <Router history={history}>
 <Switch>
 <Route path='/sign-in' exact={true} component={SignInPage} />
 <Route path='/sign-up' exact={true} component={SignUpPage} />
 <Route path='/reset-password' exact={true} component={ForgotPasswordPage} />
 <Route path='/reset-password-with-code' component={ResetPasswordPage} />
 <Route path='/info' exact={true} component={RedirectGoogleSites} />
 <Route path='/policy' exact={true} component={Policy} />
 <ProtectedRoute path='/welcome' exact={true} component={Welcome} />
 <ProtectedRoute path='/digistall' component={Digistall} /> --> this is index.jsx file
 {/* <ProtectedRoute path='/' component={MainPage} /> */}
 <ProtectedRoute path='/' component={MainDigistallDesktop} /> --> lead to my app current (Main.jsx)
 </Switch>
 </Router>
 </FirebaseContext.Provider>
 </ToastProvider>
 </Provider>
 )
}

• Nick Parsons: Are you able to create a runnable example reproducing this issue? You can use something like codesanbox, or stack snippets.
• Thanh Trung: @nick-parsons: My app is using version 17.0.2 on codesandbox it works but my app does not work. Link: codesandbox.io/s/react-17-forked-k81o5h?file=/src/App.js
• Anuj Panwar: It worked fine in the code sandbox, Please add your full code also router part.
• Thanh Trung: @AnujPanwar I have eidted this post.
• Anuj Panwar: which version is react-router-dom?

Answer 1

EDIT: You need to wrap CollapseProvider with MainDigistallDesktop. in your app component:

return (
 <Provider store={store}>
 <ToastProvider>
 <FirebaseContext.Provider value={{ firebase }}>
 <Router history={history}>
 <Switch>
 <Route path='/sign-in' exact={true} component={SignInPage} />
 <Route path='/sign-up' exact={true} component={SignUpPage} />
 <Route path='/reset-password' exact={true} component={ForgotPasswordPage} />
 <Route path='/reset-password-with-code' component={ResetPasswordPage} />
 <Route path='/info' exact={true} component={RedirectGoogleSites} />
 <Route path='/policy' exact={true} component={Policy} />
 <ProtectedRoute path='/welcome' exact={true} component={Welcome} />
 <ProtectedRoute path='/digistall' component={Digistall} /> --> this is index.jsx file
 {/* <ProtectedRoute path='/' component={MainPage} /> */}
 <ProtectedRoute path='/' render={() => (
 <CollapseProvider>
 <MainDigistallDesktop/>
 </CollapseProvider>
 )} /> --> lead to my app current (Main.jsx)
 </Switch>
 </Router>
 </FirebaseContext.Provider>
 </ToastProvider>
 </Provider>
)