react-google-recaptcha version: 2.0.0-rc.1
I am having an issue while resetting the recaptcha
I am using a functional component
extracts of code as below
// imports etc.. here
const Login: NextPage = (props:any) => {
// othere initializations here...
const recaptchaInputRef:any = React.createRef();
const handleSubmit = async (event) => {
// some if condition
// and else
// and inside there
recaptchaInputRef.current.reset();
}
return (
<React.Fragment>
<form onSubmit={e => handleSubmit(e)}>
// other components and elements
<ReCAPTCHA
ref={recaptchaInputRef}
sitekey={props.recaptchaKey}
onChange={ onChange }
onExpired={ onExpired }
/>
<Button type="submit">Sign In</Button>
</form>
</React.Fragment>
);
now the issue is, I get - Cannot read property 'reset' of null for the code -> recaptchaInputRef.current.reset();
I changed the reference to the element as below:-
const recaptchaInputRef:any = useRef({});
// this is the new react hooks way of the reference declaration
This worked for me very well as required, but I would be happy to get better on this