title: JS & React Trying to <div> from function but it states nothing was returned from render
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export function Login() {
      window.addEventListener('load', function () {
          window.FB.getLoginStatus(function (response) {
              if (!response.authResponse) {
                  console.log(response);
                  return (
                      &lt;div id='flex flex-row justify-center pb-100 fb-root'&gt;
                          &lt;button className='btn btn-round btn-lg'&gt;Login&lt;/button&gt;
                      &lt;/div&gt;
                  );
              } else {
                  console.log('UserLoggedIn');
                  return (
                      &lt;div id='flex flex-row justify-center pb-100 fb-root'&gt;
                          &lt;button className='btn btn-round btn-lg'&gt;Logout&lt;/button&gt;
                      &lt;/div&gt;
                  );
              }
          });
      });
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I am having trouble returning my button that either has login or logout depending on the response. I am using the window load function to ensure my other scripts have run first.</p>
  <p>Error Message:</p>
  <pre><code>&quot;react-dom.development.js:14169 Uncaught Error: Login(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.&quot;
  </code></pre>