How do I export "user" object from my TopBar.js to App.js?

Question

TopBar.js is basically an AppBar component which handles authentication, if a user logs in, I get an object "user", how do I export this "user" object to App.js?

If I manage to export this to App.js, I would like to export it to another component create which can handle adding stuff to my db

I am using React and Firebase

This is my useEffect function

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((authUser) => {
    if (authUser) {
      // if user has logged in...
      setUser(authUser)
      if(authUser.displayName){   }
      else{
        return authUser.updateProfile({
          displayName : userName
        });
      }
      
    } else {
      // if user has logged out... 
      setUser(null);
    }
    
  })
  return () => {
    // perform some cleanup actions
    unsubscribe();
  }
}, [user, userName]);

Answer 1

In the App.js file, you could create a context that handles this. In that case you have:

const AuthContext = createContext();

This can now be used to wrap the whole app using the Provider component like so:

// the user value comes from the state created
<AuthContext.Provider value={{user}}>
  
</AuthContext.Provider>

Then you can access this user value from any component using useContext hook:

const { user } = useContext(AuthContext);

// you can go on and access the `user` value anywhere in the component  

you can visit this article explaining it in-depth