Rendering the same form twice on the page gives a captcha already been rendered error

[sschenk]

I have a form that appears on the page but might appear/get rendered again on the same page when a user clicks a modal button.

The problem is that I get the following error if that form is being rendered twice on the page:

Error: reCAPTCHA has already been rendered in this element at Object.Hr [as render]

How do I solve this?

[hbowden]

@sschenk Use elementID prop and give each captcha a different elementID. This will let you have multiple captcha instances on a page at the same time.

[slorber]

I had the errror when using with Gatsby in production mode. The solution was to not render the component in SSR mode.

[dimitrisnl]

@slorber Can you explain a bit more?

[slorber]

Hi

I just did {isBrowser & & <Recaptcha/>} and it solved my issue. Didn't investigate more

[bartimaeus]

Thanks @slorber! That worked for me.