I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

ponentDidUpdate() {
  if (this.recaptchaInstance) {
    this.recaptchaInstance.reset();
  }
}

which looks like it re-render ponent, but language stays the same?

this is my ponent

<Recaptcha
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

Can someone please point me in right direction? Thanks!

I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

ponentDidUpdate() {
  if (this.recaptchaInstance) {
    this.recaptchaInstance.reset();
  }
}

which looks like it re-render ponent, but language stays the same?

this is my ponent

<Recaptcha
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

Can someone please point me in right direction? Thanks!

• javascript
• reactjs
• recaptcha

Share Improve this question Follow edited Aug 1, 2018 at 14:19 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Aug 1, 2018 at 14:17 Nemanja SrećkovićNemanja Srećković 35955 silver badges1818 bronze badges 2

• are you sure language.current_lang is actually different when you do the reset? – Chris Commented Aug 1, 2018 at 14:21
• @Chris yes I am, thanks! – Nemanja Srećković Commented Aug 1, 2018 at 14:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Perhaps you need to re-mount Recaptcha rather than just re-rendering it. You should use the key prop to force a re-mount:

constructor() {
  super();
  this.key = 0;
}

ponentDidUpdate() {
  if (this.recaptchaInstance) {
    this.key++; 
  }
}

<Recaptcha
  key={this.key}
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

ponentDidUpdate used in this way will make the state of the application inconsistent and/or less predictable. I suggest that hl={language.current_lang} should be hl={state.current_lang}. Updating the state with a new language through setState() will make the view to render again with new values (updated language) and will keep state consistent, predictable and easily debbugable through (I.E.) react dev tools.