CODEWITHSUNDEEP
javascriptreactjsgoogle-signin
Sagar
Sagar

Reputation: 111

Warning:Invalid value for prop `data-callback` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM

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-callback on 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>
    );
  }
}

Upvotes: 2

Views: 3042

Answers (2)

Sagar
Sagar

Reputation: 111

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" 
            />
    }
}

Upvotes: 4

RobLjm
RobLjm

Reputation: 429

You cannot pass a function to a custom data attribute. Try using an event handler such as onClick, onSubmit, onChange etc.

Upvotes: 0

Related Questions