title: How can I get more information/resolve "Objects are not valid as a React child (found: [object Promise])"?
body: <p>I've been working with the <a href="https://next-auth.js.org" rel="nofollow noreferrer">next-auth</a> package try implement Discord OAuth2 into my website. While I've nearly finished integration, I am struggling with an error that has been popping up that I cannot identify. I'm getting <code>Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.</code> on <em>every</em> rebuild, without an further information. I've looked through my code and I can't find where this is happening, I'm guessing it's happening on <code>_app.js</code>. From what I've seen it could also be due to using an async function, but I'm not sure how to work with that. <a href="https://stackoverflow.com/questions/47658765/objects-are-not-valid-as-a-react-child-found-object-promise">(Relevant post)</a></p>
  <p><code>_app.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import 'tailwindcss/tailwind.css';
  import Head from 'next/head';
  import { SessionProvider } from 'next-auth/react';
  import Nav from '../components/Nav';
  
  export default function App({
    Component,
    pageProps: { session, ...pageProps },
  }) {
    return (
      &lt;SessionProvider session={session}&gt;
  
        &lt;&gt;
          &lt;Head&gt;
            &lt;title&gt;Status+&lt;/title&gt;
  
          &lt;/Head&gt;
          &lt;div className=&quot;container-fluid mx-auto w-full scrollhost&quot; id=&quot;container4&quot;&gt;
  
            &lt;Nav&gt; &lt;/Nav&gt;
            &lt;main className=&quot;scrollhost&quot; id=&quot;container2&quot;&gt;
              &lt;Component {...pageProps} /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/&gt;
  
      &lt;/SessionProvider&gt;
    )
  }
  </code></pre>
  <p><code>index.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import Head from 'next/head';
  
  export default function Home() {
    return (
      &lt;div className=&quot;flex flex-col items-center justify-center min-h-screen py-2&quot;&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;main className=&quot;flex flex-col items-center justify-center w-full flex-1 px-20 text-center&quot;&gt;
          &lt;h1&gt;Hello World.&lt;/h1&gt;
        &lt;/main&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><code>Nav.jsx</code></p>
  <pre><code>import Link from 'next/link';
  import axios from 'axios';
  
  import { useSession, signIn, signOut } from 'next-auth/react';
  
  async function returnSignIn() {
    const { data: session } = useSession();
  
    if (!session) {
      return (
        &lt;button onClick={() =&gt; signIn()} className=&quot;btn btn-primary&quot;&gt;Sign In&lt;/button&gt;
  
      );
    }
    const { accessToken } = session;
  
    const profileData = await fetch('https://discord.com/api/users/@me', {
      headers: {
        authorization: `Bearer ${accessToken}`,
      },
    });
    const newData = await profileData.json();
    console.log(newData);
  
    if (!newData) {
      return (
        &lt;button onClick={() =&gt; signIn()} className=&quot;btn btn-primary&quot;&gt;Sign In&lt;/button&gt;
  
      );
    }
    return (
      &lt;p&gt;E&lt;/p&gt;
    );
  }
  
  const Nav = async () =&gt; (
    &lt;div className=&quot;navbar z-10 top-0 fixed shadow-lg bg-neutral text-neutral-content inset-x-0 bg-opacity-80 backdrop-filter backdrop-blur-lg&quot;&gt;
      &lt;div className=&quot;px-2 mx-2 navbar-start&quot;&gt;
        &lt;span className=&quot;text-lg font-bold&quot;&gt;
          Status+
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div className=&quot;hidden px-2 mx-2 navbar-center lg:flex&quot;&gt;
        &lt;div className=&quot;flex items-stretch&quot;&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Home
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Status
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Dashboard
            &lt;/Link&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className=&quot;navbar-end&quot;&gt;
        {returnSignIn()}
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  );
  export default Nav;
  </code></pre>
  <p>Where is this error happening? Is there a way to get a better Stack Trace so I can debug what is going on here? Thanks!</p>
  <p>EDIT: Per the suggestion below, I've tried this code using <code>useEffect</code> without luck:</p>
  <pre class="lang-js prettyprint-override"><code>import Link from 'next/link';
  import axios from 'axios';
  import { useState, useEffect } from 'react';
  import { useSession, signIn, signOut } from 'next-auth/react';
  
  async function returnSignIn() {
    const { data: session } = useSession();
  
    if (!session) {
      return (
        &lt;button onClick={() =&gt; signIn()} className=&quot;btn btn-primary&quot;&gt;Sign In&lt;/button&gt;
  
      );
    }
    const { accessToken } = session;
  
    const [profileData, setProfileData] = useState([]);
    useEffect(() =&gt; {
      async function fetchData() {
        const importantData = await fetch('https://discord.com/api/users/@me', {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        });
        const newData = await importantData.json();
        setProfileData(newData);
      }
      fetchData();
    }, []);
  
    if (!profileData) {
      return (
        &lt;button onClick={() =&gt; signIn()} className=&quot;btn btn-primary&quot;&gt;Sign In&lt;/button&gt;
  
      );
    }
    return (
      &lt;p&gt;E&lt;/p&gt;
    );
  }
  
  const Nav = async () =&gt; (
    &lt;div className=&quot;navbar z-10 top-0 fixed shadow-lg bg-neutral text-neutral-content inset-x-0 bg-opacity-80 backdrop-filter backdrop-blur-lg&quot;&gt;
      &lt;div className=&quot;px-2 mx-2 navbar-start&quot;&gt;
        &lt;span className=&quot;text-lg font-bold&quot;&gt;
          Status+
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div className=&quot;hidden px-2 mx-2 navbar-center lg:flex&quot;&gt;
        &lt;div className=&quot;flex items-stretch&quot;&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Home
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Status
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;div className=&quot;btn btn-ghost btn-sm rounded-btn&quot;&gt;
            &lt;Link href=&quot;/&quot;&gt;
              Dashboard
            &lt;/Link&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className=&quot;navbar-end&quot;&gt;
        {returnSignIn()}
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  );
  export default Nav;
  </code></pre>