React calling method by reference doesn't work

Question

I am new to reactjs and I am trying to integratin social-auth with react

Example code provided works but when I try to integrate it doesnt

This Code works

    const handleSocialLogin = (user) => {
    debugger
    console.log(user)
  }
   
  const handleSocialLoginFailure = (err) => {
    debugger
    console.error(err)
  }
function App() {
  return (
    <div className="App">
      <SocialButton
        provider='facebook'
        appId='XXXXX'
        onLoginSuccess={handleSocialLogin}
        onLoginFailure={handleSocialLoginFailure}>
        Login with Facebook
      </SocialButton>
    </div>
  );
}

But this code doesn't and i am not sure how to read data returned by FB in the code below.

class StockFrame extends React.Component{

    constructor(props) {

    }

    handleSocialLogin = (user) =>{
        console.log("user **********")
        debugger
        console.log(user)
    }
    render() {
        return(
            <div className="App">
            <SocialButton
                provider='facebook'
                appId='XXXXX'
                onLoginSuccess={handleSocialLogin}
                onLoginFailure={handleSocialLoginFailure}>
                Login with Facebook
            </SocialButton>
            </div>
        );
     }
}

Social button component link

class SocialButton extends React.Component {
 
    render() {
        return (
            <button onClick={this.props.triggerLogin} {...this.props}>
              { this.props.children }
            </button>
        );
    }
}
 
export default SocialLogin(SocialButton);

Answer 1

您需要使用它，因为它是一个类组件。

onLoginSuccess={this.handleSocialLogin}