Next.js context provider wrapping App component with page specific layout component giving undefined data

by

With your current structure ProjectLayout isn’t getting wrapped by the AuthContext, meaning you won’t have access to its context.

You can modify your _app‘s structure and move the getLayout call around so that the context wraps it properly.

function MyApp({ Component, pageProps }) {    
    const getLayout = Component.getLayout || ((page) => page);

    return (
        <AuthContext>
            {getLayout(<Component {...pageProps} />)}
        </AuthContext>
    );
}

More Related Contents:

  1. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  2. The useState set method is not reflecting a change immediately
  3. Window is not defined in Next.js React app
  4. How can I use React hooks in React classic `class` component?
  5. Why is useState not triggering re-render?
  6. Updating and merging state object using React useState() hook
  7. componentDidMount equivalent on a React function/Hooks component?
  8. How to register event with useEffect hooks?
  9. Is there a generic way to set state in React Hooks? How to manage multiple states?
  10. How do I update states `onChange` in an array of object in React Hooks
  11. React Function Components with hooks vs Class Components
  12. React Hooks – What’s happening under the hood?
  13. useEffect does not listen for localStorage
  14. setTimeout for this.state vs useState
  15. How does JavaScript mechanism behind react hooks work?
  16. Why need useRef and not mutable variable?
  17. Determine which dependency array variable caused useEffect hook to fire
  18. unable to deploy next js to azure
  19. Updating state to the same state directly in the component body
  20. Proper way of using React hooks + WebSockets
  21. React hook useEffect runs continuously forever/infinite loop
  22. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  23. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  24. React Hook “useEffect” is called conditionally
  25. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  26. Performance penalty of creating handlers on every render with react-hooks
  27. Function inside functional component in React hooks – Performance
  28. how can I use top level “await” in typescript next.js
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. Why would we use useEffect without a dependency array?

Leave a Comment