useContext() returns null value

Question

I am trying to use useContext to get the current logged in user details. I am getting an error in my console which says:

Uncaught TypeError: user is null
    children Animate.jsx:79
    Animate Animate.jsx:76

I am getting this error whenever I Logout. I am facing no errors in the console when I am logged in. Here is the code:

Context.js File:

import { onAuthStateChanged } from "firebase/auth";
import { useEffect, useState } from "react";
import { createContext } from "react";
import { auth } from "./firebase";

export const Context = createContext()

const ContextProviderfunc=({children})=>{
    const use={
        "mail":'history'
    }

    const [user,setuser]=useState({});
    useEffect(()=>{
        const unsubscribe = onAuthStateChanged(auth,(currentUser)=>{
            // console.log(currentUser);
            setuser(currentUser);
        })
        return ()=>{
            unsubscribe();
        }
    },[])

    return(
        <Context.Provider value={user}>
            {children}
        </Context.Provider>
    )
}

export default ContextProviderfunc

Animate.jsx File:

import React from 'react'
import {
    BrowserRouter as Router, Routes, Route, useLocation, Link
} from 'react-router-dom'
import Navbar from './Navbar'
import RecipeCard from './RecipeCard'
import Details from './Details'
import { AnimatePresence, motion } from "framer-motion"
import Add from './Add'
import clicked from './RecipeCard'
import { useState } from 'react'
import Login from './Login'
import Register from './Register'
import Protected from './Protected'
import Logout from './Logout'
import Myrecipe from './Myrecipe'
import { useContext } from 'react'
import { Context } from '../Context'




export default function Animate(props) {

    const user=useContext(Context)  
    const [pname, setpname] = useState()
    function assign(nigga) {
        setpname(nigga);
        console.log(nigga);
    }


    const location = useLocation()
    return (
        <motion.div className='all'
        >
            <AnimatePresence>

                <Routes location={location} key={location.pathname}>



                    <Route path='/Login' element={<Login />} />
                    <Route path='/Register' element={<Register />} />
                    <Route path='*' element={[<Protected><Navbar /></Protected>, <h2>Recipes</h2>,
                    <div className='recipes'>
                        {props.query ? props.query.map((object, i) => (
                            <Link className='lin' to='/Details'>
                                <div onClick={() => assign(object.Name)}>
                                    <Protected><RecipeCard
                                        src={object.src}
                                        name={object.Name}
                                        ingredients={object.Ingredients}
                                        steps={object.Steps}
                                        key={i}
                                    /></Protected>
                                </div></Link>

                        )) : "Loading"}
                        <Link className='lin' to='/Add'>
                            <div className='cardcont'>
                                <img src='https://cdn.pixabay.com/photo/2017/11/10/05/24/add-2935429_960_720.png' alt="1" className='cardimg' />
                                <div className='cardbody'>
                                    <h3>Add</h3>
                                </div>
                            </div></Link>
                    </div>
                    ]} />





                    <Route path='/MyRecipe' element={[<Protected><Navbar /></Protected>, <h2>My Recipes</h2>,
                    <Protected>
                        <div className='recipes'>
                        {props.query2 ? props.query2.map((object, i) => {

                            if(user.email==object.email){
                                console.log(user.email);

                                return(<Link className='lin' to='/Details'>
                                <div onClick={() => assign(object.Name)}>
                                    <Protected><RecipeCard
                                        src={object.src}
                                        name={object.Name}
                                        ingredients={object.Ingredients}
                                        steps={object.Steps}
                                        key={i}
                                    /></Protected>
                                </div></Link>)
                            }
                            
                                
                            
                        }
                            

                        ) : "Loading"}
                        <Link className='lin' to='/Add'>
                            <div className='cardcont'>
                                <img src='https://cdn.pixabay.com/photo/2017/11/10/05/24/add-2935429_960_720.png' alt="1" className='cardimg' />
                                <div className='cardbody'>
                                    <h3>Add</h3>
                                </div>
                            </div></Link>
                    </div>
                    </Protected>
                    ]} />


                    <Route path='/Details' element={
                        [<Navbar />, props.query ? props.query.map((object, m) => {
                            if (pname == object.Name) {

                                console.log(object.Name);
                                return (<Details
                                    src={object.src}
                                    name={object.Name}
                                    Ingredients={object.Ingredients}
                                    Steps={object.Steps}
                                    key={m}
                                />)
                            }
                        }) : "Loading"]} />


                    <Route path='/Add' element={[<Navbar />, <Add />]} />

                </Routes>
            </AnimatePresence>
        </motion.div>
    )
}

line 79 of Animate.jsx

if(user.email==object.email){
       console.log(user.email);

App.js file:

    import Navbar from './components/Navbar';
import RecipeCard from './components/RecipeCard';
import { useContext, useEffect, useState } from 'react';
import { auth, db, storage } from './firebase'
import { collection, addDoc, getDocs, doc } from "firebase/firestore";
import { async } from '@firebase/util';
import Details from './components/Details'

import Animate from './components/Animate';
import {BrowserRouter as Router, Route,Routes} from 'react-router-dom'
import Add from './components/Add';
import ContextProviderfunc from './Context';
import { Context } from './Context';







function App() {


  

  

  const [query, setquery] = useState()
  const [query2, setquery2] = useState()
  const [recipe, setrecipe] = useState()



  const add = async (e) => {
    e.preventDefault()

    try {
      const docRef= await addDoc(collection(db, "recipe"),
        {
          src: 'https://images.immediate.co.uk/production/volatile/sites/30/2017/02/Two-panna-cotta-on-plates-298e616.jpg',
          ingredients: ['Dish'],
          steps: ['Description']
        }, {
        src: 'https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F43%2F2022%2F04%2F19%2F22749-the-best-banana-pudding-mfs-366-1x1-1.jpg',
        ingredients: ['Dish'],
        steps: ['Description']

      });
      // console.log('morein');
      // console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.log('morein');
      console.error("Error adding document: ", error);
    }

  }


  useEffect(() => {
    const getrecipe = async () => {
      const data = await getDocs(collection(db, 'recipe'))
      const data2 = await getDocs(collection(db, 'userrecipe'))

      console.log(data);
      setquery(data.docs.map((doc) => (
        {
          ...doc.data(), id: doc.id
        })
      ))
      setquery2(data2.docs.map((doc) => (
        {
          ...doc.data(), id: doc.id
        })
      ))

      console.log(query);
    };

    getrecipe();
  }, []);


  useEffect(() => {
    // searchRecipes();
  }, [])






  return (
    <div>
      <ContextProviderfunc>
      <Router>
      
      
        <Animate  query={query} query2={query2}/>
      </Router>
      </ContextProviderfunc>

    </div>
  );
}

export default App;

These two files I think are needed to debug. If any more code is needed I will provide it. Please find out the issue in the above code

Can you show where you used <ContextProviderfunc>...</ContextProviderfunc> and tell us, if your Animate is a child node inside of <ContextProviderfunc>. — Sergey Sosunov
– Sergey Sosunov, Commented Aug 14, 2022 at 13:04
onAuthStateChanged gives you a null if no user is logged in, so i would expect the context to sometimes have a null value, and indeed you said this happens when you log out. If you have code that is supposed to unmount Animate when logged out, then we'll need to see that. If you don't have any such code, you'll either need to add it, or write Animate to still work if user is null. — Nicholas Tower
– Nicholas Tower, Commented Aug 14, 2022 at 13:09
@NicholasTower I have added the App.js file where you can see the <ContextProviderfunc> — Mohd Zaid
– Mohd Zaid, Commented Aug 14, 2022 at 13:32

Emre Sakarya · Accepted Answer · 2022-08-14 13:31:03Z

1

If you set logged out user ti be null, you should not expect to retrieve email address of null. You should check (read from context) if user still logged in.

For example :

if(user) {
    return <div>I am logged in user and my email is {user.email} </div>
}

return <div>You are not logged In </div>

Specific to your case: check first user and then user.email to avoid Uncaught TypeError: user is null if(user && user.email === object.email) .....

This is just a friendly suggestion, which is not related with your question: Use ===instead of == for for information you can read this page

answered Aug 14, 2022 at 13:31

Emre Sakarya

261 bronze badge

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

Comments

Erfan · Accepted Answer · 2022-08-14 13:11:47Z

Whenever the user logs out, value of currentUser will become null in here:

onAuthStateChanged(auth,(currentUser)=>{
        // console.log(currentUser);
        setuser(currentUser); // currentUser is null
    })

Since you are updating the state (setuser), The Context Provider rerenders and passes down null as value.

 return(
    <Context.Provider value={user}> // user is null, and is being passed down
        {children}
    </Context.Provider>
)

Within Animate you receive the null value.

    const user=useContext(Context)  // user is null, after loging out.

Long story short, user is at times null within Animate, so you don't have the guarantee to use properties like email, like this line below:

if(user.email==object.email){
   console.log(user.email);

The solution: Wherever you need to use user, first check if it equals to null.

Collectives™ on Stack Overflow

useContext() returns null value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related