onClick() not called for facebook button - reactJS

Question

For some reason my onClick handler doesn't work with the facebook button (found at https://developers.facebook.com/docs/facebook-login/web/login-button/). But it will work with a common div.

Any idea why the onClick isn't called on the facebook button (second div)?

<div onClick={this._handleFBLogin}>Facebook Login (working)</div>
<div onClick={this._handleFBLogin} 
   className="fb-login-button" 
   data-max-rows="1" 
   data-size="large" 
   data-button-type="continue_with" 
   data-show-faces="false" 
   data-auto-logout-link="false" 
   data-use-continue-as="false" />

Symptoms:

The onClick() never even get's called.

EDIT: Follow Up

Based on @luschn's response, and some other questions (notably: Implement Facebook API login with reactjs)

I had to circumvent my _handleFBLogin() function which called a function to handle the facebook auth and directly handle the facebook auth. Here is the relevant code in componentDidMount():

        const facebookCallback = (response) => {
            return this._facebookCallback(response)
        }
        window.fbAsyncInit = function() {
            FB.init({
                appId      : FACEBOOK_APP_ID,
                cookie     : true,  // enable cookies to allow the server to access the session
                version    : FACEBOOK_API_VERSION
            });

            FB.Event.subscribe('auth.statusChange', function(response) {
                facebookCallback(response)
            });
        }.bind(this);

Note the binding and subscribe to auth.statusChange.

Also I didn't need to add data-onlogin because of this subscribe event.

Lastly, my origional _handleFBLogin code was:

_handleFBLogin = () => {
        FB.login(response => {
            this._facebookCallback(response)
        }, {scope: 'public_profile,email'})
    }

You should post your follow up question as a new question.

user4639281
– user4639281

2018-12-09 19:55:38 +00:00
Commented Dec 9, 2018 at 19:55 — user4639281
– user4639281, Commented Dec 9, 2018 at 19:55

andyrandy · Accepted Answer · 2018-12-09 19:23:50Z

1

You have to use the onlogin parameter/attribute instead, as you can read in the docs. Alternatively, you can use your own custom button with this: https://developers.facebook.com/docs/reference/javascript/FB.login/

Using your own onClick method would be pointless anyway, because the button plugin handles the login for you.

answered Dec 9, 2018 at 19:23

andyrandy

74.1k9 gold badges115 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Danikowski Over a year ago

Thank you @luschn I will do this

Collectives™ on Stack Overflow

onClick() not called for facebook button - reactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related