After selecting all the correct images the captcha shows you, the recaptcha doesn't get re-rendered with a pass (green check)

I’m adding a <ReCaptcha /> component inside a redux-forms <Field /> component, the below <Field /> component is returned by the render function of the myForm component I have:

<Field name='captcha' size="normal" theme="dark" component={(formProps) => this.renderReCaptcha(formProps)} />

This is my renderReCaptcha function that returns the <ReCaptcha /> component:

renderReCaptcha = (formProps) => {
    return(
      <div>
        <ReCaptcha
            ref={(ref) => {this.captcha = ref;}}
            size={formProps.size}
            theme={formProps.theme}
            sitekey="<SOME-KEY>"
            onChange={this.onChange}
        />
      </div>
    );
  }

After selecting all the correct images the captcha shows you and clicking ‘Verify’, I get a recaptchaToken back which means it passed, however, the recaptcha doesn’t get re-rendered with a pass (green check) like below:

instead it goes back to:

Is that what’s supposed to happen?. On the codesandbox.io example as soon as you click on it it goes to:

[dozoisch]

Using Reatc.PureComponent and/or the lifecycle shouldComponentUpdate is the way to do it.

https://reactjs.org/docs/react-api.html#reactpurecomponent

The re-render should not be an issue. The problem is the component unmounting and remounting. You have something in your component tree somewhere that gets a different key that causes a full remount

[vascojm82]

Thanks a lot for your help @dozoisch.