title: How to export a global object in React js
body: <p>I am trying to store the email of the user once successfully signed in.</p>
  <p>For this,</p>
  <ul>
  <li>Created a file <code>logged_user.js</code></li>
  <li>Created a class <code>LoggedUser</code> and a single instance of it named <code>loggedUser</code>.</li>
  <li>Exported <code>loggedUser</code>.</li>
  </ul>
  <p>I was assuming that where ever I am going to import <code>logged_user.js</code>, I am going to get that single instance only. But actually, I am getting a new instance.</p>
  <p><strong>&lt;logged_user.js&gt;</strong></p>
  <pre><code>class LoggedUser{
      #email;
      #userExist;
      constructor(){
          this.#email = null;
          this.#userExist = false;
      }
  
      setUser(email){
          this.#email = email;
          this.#userExist = true;
      }
  
      resetUser(){
          this.#email = null;
          this.#userExist = true;
      }
  
      get userExist(){
          return this.#userExist;
      }
  
      get email(){
          return this.#email;
      }
  }
  
  const loggedUser = new LoggedUser();
  
  export default loggedUser;
  </code></pre>
  <p><strong>Function handling signing in</strong></p>
  <pre><code> async handleSingIn() {
      this.clearAlert();
      this.setState({ loading: true });
  
      if (this.validateEmailAndPassword()) {
        await signIn(this.state.emailInput, this.state.passwordInput)
          .then(() =&gt; {
            this.setState({ loading: false });
            this.showAlert(&quot;Signed In.&quot;, false);
            loggedUser.setUser(this.state.emailInput);
            window.location.href = &quot;/adminPanel&quot;;
          })
          .catch((error) =&gt; {
            this.setState({ loading: false });
            switch (error.code) {
              case &quot;auth/invalid-email&quot;:
                this.showAlert(&quot;Invalid email!&quot;);
                break;
              case &quot;auth/wrong-password&quot;:
                this.showAlert(&quot;Wrong password!&quot;);
                break;
              case &quot;auth/user-not-found&quot;:
                this.showAlert(&quot;User not found!&quot;);
                break;
              default:
                alert(error.message);
                this.showAlert(&quot;Something went wrong!&quot;);
            }
          });
      } else {
        this.setState({ loading: false });
      }
    }
  </code></pre>
  <p>Once the user signed in the route is switched from Login page to admin page. There I am trying to get access to that email but it comes out to be <code>null</code>.</p>
  <pre><code>async componentDidMount(){
      const collegeName = await 
      await getCollegeName(loggedUser.email);
      this.setState({collegeName: collegeName})
    }
  </code></pre>
  <p>I want only a single instance of <code>LoggedUser</code> to be imported throughout all the files.</p>