Can't use React context?

Question

My index.js has:

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <Suspense fallback="loading">
            <App/>
        </Suspense>
    </FirebaseContext.Provider>,
    document.getElementById('root')
);

Inside app.js I am trying to access the context:

export default function App(props) {
    console.log("app trying to use firebase");
    const {firebase} = useFirebase();
    return <div>{firebase && firebase.loggedIn()}</div>
}

FirebaseContext and Firebase class are defined like so:

export const FirebaseContext = createContext({});
export const useFirebase = () => useContext(FirebaseContext);

export default class Firebase {
    constructor() {
        console.log("firebase intialized")
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
    }

    loggedIn = () => {
        return !!this.auth.currentUser;
    }
}

FirebaseContext seems to be initialized properly since I get the output inside the console, but I keep getting Error: Cannot read property 'loggedIn' of undefined. Why can't I use my context?

Oops, it was just a typo! Should have been `const firebase = useFirebase();` — EZbrute, Apr 17 '21 at 10:04

score 1 · Accepted Answer · answered Apr 17 '21 at 10:15

Have you tried your code after removing the destructuring like so

const {firebase} = useFirebase(); =>>> const firebase = useFirebase();

If the issue persists, then try to bind the firebase variable given that loggedIn is resulting in undefined within a class-based component.

Can't use React context?

1 Answers1