2

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>
    );
  }
}
Sagar
  • 91
  • 8
  • Custom attributes aren't meant to hold functions. They are meant to hold values. Depending on how you want the logic, you need to run your function in a lifecycle method for Class components, or hook logic for functional components (such as useEffect). Then what your function needs to do, is target the element and set the custom attribute with the value. – Martin Sep 04 '21 at 16:41
  • that is if you actually want the attribute with a value. If you want to fire the functions based off conditions, then you need to look into handling states. – Martin Sep 04 '21 at 17:03
  • I replied to a duplicate question -> [You can set a function as a global variable](https://stackoverflow.com/a/71421555/6464245). – Radek Mezuláník Mar 10 '22 at 09:16

2 Answers2

4

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" 
            />
    }
}
Sagar
  • 91
  • 8
0

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

RobLjm
  • 399
  • 2
  • 11