reCAPTCHA: Do not access .getDOMNode()

Question

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 [email protected] 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' })
      }
    })
  }
}

Answer 1

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 [email protected]

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