title: React Function to Component and Setting State with Function Return
body: <p>here's the jist of where I'm stuck (or just read the title for my question).</p>
  <p>I have a <code>firebase.js</code> file where I have functions to authenticate. <code>signinGithub</code>, <code>signinGoogle</code>, <code>signinEmail</code> and so forth. The Firebase Auth business logic is in these functions.</p>
  <p>I am showing errors with <code>console.log</code> or <code>alert</code> from these functions. The functions are imported into a <code>Component</code> and I don't know how to capture the functions result into the component by somehow setting state from this out-of-component function file.</p>
  <p>Here's a basic example:</p>
  <p><strong>firebase.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>...
  const signInWithGitHub = async () =&gt; {
    try {
      const res = await signInWithPopup(auth, githubProvider)
      const user = res.user
    } catch (err) {
      alert(err) // ** I want to pass &quot;err&quot; from here to Login
                 // ** component by updating Logins state for a message
    } 
  }
  
  export {signinWithGitHub}
  ...
  </code></pre>
  <p><strong>Login.jsx</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState } from &quot;react&quot;
  import { useAuthState } from &quot;react-firebase-hooks/auth&quot;
  import {
    auth,
    signInWithGitHub
  } from &quot;../lib/firebase&quot;
  
  function Login() {
    const [user, loading, error] = useAuthState(auth)
    render(
      {* Below is the method call from the imported custom firebase function *}
      &lt;button onClick={signInWithGitHub}&gt;
        Login with GitHub
      &lt;/button&gt;
    )
  } 
  ...
  </code></pre>
  <p>I was thinking something like this but I can't fully resolve it in my mind:</p>
  <ul>
  <li>Set state in <strong>Login.js</strong> <code>const [message, setMessage] = useState('')</code></li>
  <li>When the imported <strong>signinWithGitHub</strong> has an <code>error</code> message --</li>
  </ul>
  <p><strong>I'm stuck figuring out how to apply to function message to the state, any ideas?</strong></p>