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' })
}
})
}
}
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.