0

I'm getting an error when I try to use useContext with next.js Here I create the context:

import React, { createContext } from 'react';

const FirebaseContext = createContext(null);

export default FirebaseContext;

This is my index file:

import firebase from './firebase';
import FirebaseContext from './context';

export {FirebaseContext};

export default firebase;

This is my _app.js:

import firebase, { FirebaseContext } from '../firebase';
import useAuth from '../hooks/useAuth';

const MyApp = props => {
    const user = useAuth();
    const { Component, pageProps } = props;

    return (
        <FirebaseContext.Provider
            value={{
                firebase,
                user
            }}
        >
            <Component {...pageProps} />
        </FirebaseContext.Provider>
    )
}

and here I'm using the context

import React, { useContext } from 'react';
import { FirebaseContext } from '../../firebase';
...
const {user, firebase} = useContext(FirebaseContext);

I'm looking and the context work, but its like I can't access to the data:

enter image description here

Any idea what may be going on?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
dylan1496
  • 1
  • 1

1 Answers1

0

This will fix your problem;

const firebaseContext = useContext(FirebaseContext);

and you can use firebaseContext?.user or firebaseContext?.firebase; instead of destructuring.

Najam Uddin
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 30 '22 at 23:29