React-google-recaptcha does not appear in the modal when the component is rendered

Question

I am using react-google-ReCAPTCHA in bootstrap modal. First time its visible when I close the modal and again reopen the modal its not visible

 <ReCAPTCHA
       sitekey={process.env.REACT_APP_EMAIL_RECAPTCHA_SITE_KEY}
       className="g-recaptcha-response"
       name="g-recaptcha-response"
    />

Answer 1

I was running into this same issue. I found this slack post that helped... https://stackoverflow.com/a/39507430/14953153

Here's a code snippet I hope it helps. Note that I have a try-catch so on the first render it'll try but fail because there's already a ReCaptcha element but any other rerender it'll render a new ReCaptcha element.

export const MyComponent = () => {

const modalOnShow = () => {
    try {
        window.grecaptcha.render('form-recaptcha', {
            sitekey: "[site-key]",
            callback: function(resp){}
        });
    } catch (error) {
        console.log(error)
    }
}

return (
    <Modal onEntered={modalOnShow}>
        <ReCAPTCHA 
            id="form-recaptcha"
            sitekey="[site-key]"
        />
    </Modal>

)

}