export function Login() {
    window.addEventListener('load', function () {
        window.FB.getLoginStatus(function (response) {
            if (!response.authResponse) {
                console.log(response);
                return (
                    <div id='flex flex-row justify-center pb-100 fb-root'>
                        <button className='btn btn-round btn-lg'>Login</button>
                    </div>
                );
            } else {
                console.log('UserLoggedIn');
                return (
                    <div id='flex flex-row justify-center pb-100 fb-root'>
                        <button className='btn btn-round btn-lg'>Logout</button>
                    </div>
                );
            }
        });
    });
}

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.

Error Message:

"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."

CodePudding user response：

I assume that this function is supposed to be a React component. React components need to return something. Your component is not returning anything. Based on the code above, it looks like you only want to render the button once you have a login status. So firstly return null from this function outside of window.addEventListener callback function. This will make the error go away, but will not accomplish what you are trying to do. Next, add an isLoading state to the component using the useState hook which defaults to true. Then, wrap your widow.addEventListener call inside a useEffect call and instead of returning the button, change the isLoading state to false. You will probably need a second state object to hold the result of the getLoginStatus. Then your component can conditionally return either of the buttons or null depending on the state of the component.