In the second last div tag with id = "g_id_onload" if i assign a function to the attribute data-callback, react gives a warning:
Warning:Invalid value for prop
data-callbackon div tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
Also data-callback never gets called. Does anyone know what is wrong with this.
class Login extends React.Component{
handleCredentialResponse = (response)=>{
console.log(response.credentials);
}
render(){
return (
<div className="login">
<div className="text-center mb-2">
<img src="http://placehold.it/60" alt="Sign in"/>
</div>
<form>
<div className="text-center h3 mb-3">Sign in</div>
<div className="mb-3">
<label className="form-label">Email address</label>
<input type="email" className="form-control" />
</div>
<div className="mb-3">
<label className="form-label">Password</label>
<input type="password" className="form-control"/>
</div>
<div className="text-center mb-3">
<button type="submit" className="btn btn-primary">Sign in</button>
</div>
</form>
<div className="mb-3 text-center form-text div_or">Or</div>
<div className="google_signin_row">
<div className="google_signin_col">
<div id="g_id_onload"
data-client_id="CLIENT_ID"
data-callback={(res)=>this.handleCredentialResponse(res)}>
</div>
<div className="g_id_signin" data-type="standard" data-theme="filled_blue" data-width="250"></div>
</div>
</div>
</div>
);
}
}
Found the solution here: https://github.com/google/recaptcha/issues/74
summary:
The data-callback attribute expects a string that defines the name of the function in the global namespace that should be fired. You cannot define the function within the attribute.
So defining the function handleCredentialResponse in global namespace and putting data-callback = "handleCredentialResponse" works.
alternative way:
class Login extends React.Component{
constructor(props) {
super(props);
window.handleCredentialResponse = this.handleCredentialResponse;
}
handleCredentialResponse(response){
console.log(response);
}
render(){
return <div className="g_id_onload"
data-callback="handleCredentialResponse"
/>
}
}
You cannot pass a function to a custom data attribute. Try using an event handler such as onClick, onSubmit, onChange etc.