0

I'm using react-google-login in my react-redux project and having trouble accessing the props for the component in which this login button exists. I used react-facebook-login in a similar way and it works fine - however, console.log(this) in the loginGoogle() function prints 'undefined' whereas it printed the Javascript object representing the whole Login component in my similar loginFacebook() method. Any ideas as to how I can access this.props in loginGoogle()?

In my Login component: 

//all needed import statements

class Login extends Component {

  loginGoogle(response) {
    console.log(response);
    this.props.loginGoogleRequest(response.profileObj.email, response.accessToken, response.tokenObj.expires_in)
  }

  render() {
    <GoogleLogin
      clientId="{client id here}"
      onSuccess={this.loginGoogle}
      className="custom-google-btn"
    />
  }

function mapDispatchToProps(dispatch) {
  return {
    loginGoogleRequest: (email, accessToken, expiresIn) => {
      //some code that isn't being reached
    }
  }
}

export default connect(mapDispatchToProps)(Login);

I trimmed a lot of the fat out of this class in order to make it more readable - please let me know if it would help if I included more code in any way.

daviddorsey4
  • 122
  • 1
  • 10

1 Answers1

1

Try change loginGoogle definition to Arrow function: loginGoogle(response) { => loginGoogle = (response) => {

An arrow function does not create its own "this", the this value of the enclosing execution context is used.

Or you may bind loginGoogle method, refer to this answer: Why JSX props should not use arrow functions

kugont
  • 26
  • 3