react-facebook-login with lifecycle problem

Question

I'm still learning react. I have a sign in page component which contains google login and facebook login button. I can redirect to google and facebook and get the login response back but there are some error with my facebook login. When I disabled the facebook login button, these lifecycle problems and errors are gone. I do not know where the t component come from. How do I resolve this?

import React, { useState } from 'react';
import './SignIn.css';
import { IoLogoGoogle, IoLogoFacebook } from 'react-icons/io';
import { connect } from 'react-redux';
import { useHistory, Link } from 'react-router-dom';
import { LoginAction, GoogleLoginAction, FacebookLoginAction } from '../../redux/User/User.actions';
import { GoogleLogin } from 'react-google-login';
import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'

function SignIn(props) {
    const { googleLogin, facebookLogin } = props;
    const history = useHistory();

    const responseGoogle = (response) => {
        const email = response.profileObj;
        googleLogin(email, history);
    }

    const responseFacebook = (response) => {
        const emailFromFacebook = response.email;
        facebookLogin(emailFromFacebook, history);
    }

    return (
        <div className="login-container">
                    <div className="sign-social-media-icons">
                        <div className="social-media-icon">
                            <GoogleLogin
                                clientId="appId"
                                render={renderProps => (
                                    <IoLogoGoogle
                                        onClick={renderProps.onClick}
                                        disabled={renderProps.disabled}
                                    />
                                )}
                                buttonText="Login"
                                onSuccess={responseGoogle}
                                onFailure={responseGoogle}
                                cookiePolicy={'single_host_origin'}
                            />
                        </div>
                        <div className="social-media-icon">
                            <FacebookLogin
                                appId="appId"
                                callback={responseFacebook}
                                fields="first_name, last_name, email"
                                scope="public_profile, email"
                                returnScopes={true}
                                render={renderProps => (
                                    <IoLogoFacebook
                                        onClick={renderProps.onClick}
                                    />
                                )}
                            />
                        </div>
                    </div>

        </div>
    )
};

const mapDispatchToProps = (dispatch) => {
    return {
        googleLogin: (googleLoginState, history) => {
            dispatch(GoogleLoginAction(googleLoginState, history));
        },
        facebookLogin: (facebookLoginState, history) => {
            dispatch(FacebookLoginAction(facebookLoginState, history));
        },
    };
};

export default connect(
    mapDispatchToProps
)(SignIn);

Answer 1

The warning you can ignore. It just tells you that something in your code is using deprecated or legacy code, which is often the case with modules that have been around for a long time.

The second error message is trying to tell you, that the facebook login api does not support calls from http websites anymore. This is probably due to security concerns, since if you don't use https, your users information might be exposed. To use the facebook api in development mode have a look at this article