reactjsrecaptchadom-node

reCAPTCHA: Do not access .getDOMNode()


I've been trying to implement reCAPTCHA into my react app but when everything finally seemed ok I checked console and found this warning:

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by 'reCAPTCHA'.

My current versions of packages:

`"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-google-recaptcha": "^0.4.1",`

Tried to fix this by downgrading to react@0.14.0 but it didn't help.

EDIT:

Code:

onChange(response) {
  console.log("Captcha value:", value);
  this.setState({
    'g-recaptcha-response': response
  });
}
render() {
 return (
    <ReCAPTCHA
      ref="recaptcha"
      sitekey="6Le0bCoUAAAAAMnfIWvY2b8w0Z932kI6Iu_zu3p9"
      onChange={this.onChange.bind(this)}
    />
 );
}

And server side:

const recaptcha = require('express-recaptcha');
recaptcha.init(process.env.CAPTCHA_SITE_KEY, 
process.env.CAPTCHA_SECRET);

module.exports = {
    captchaVerify(req, res, next) {
    recaptcha.verify(req, (err) => {
      if (!err) {
        res.status(200).send({ err: 'Approved' });
      } else {
        res.status(422).send({ err: 'Disapproved' })
      }
    })
  }
}

Solution

  • You are using an outdated version of react-google-recaptcha, which leads to an error/warning with React 14. Try upgrading with:

    npm install --save react-google-recaptcha@0.9.6
    

    If that doesn't work, change the version to 0.5.1, it's the release that introduced support for React 14.