HOC для рефакторинга

Как зарефакторить в HOC reCaptcha правильно? Есть несколько компонентов с относительно одинаковым кодом:

...
let LoginForm = ({
  disableCaptcha,
  recaptchaRef,
}) => {
  const onChange = (recaptchaValue) => {
    handleLogin(recaptchaValue);
  };
  const [isBtnDisabled, setIsBtnDisabled] = useState(recaptchaSiteKey && !disableCaptcha);
  const asyncScriptOnLoad = () => {
    setIsBtnDisabled(false);
  };
...
 {recaptchaSiteKey && !disableCaptcha && (
          <Recaptcha
            ref={recaptchaRef}
            sitekey={recaptchaSiteKey}
            onChange={onChange}
            size="invisible"
            asyncScriptOnLoad={asyncScriptOnLoad}
          />
        )}

        <Col xs="12" className="login-submit-btn">
          <ButtonSubmitComponent messageType="login" disabled={isBtnDisabled} />
        </Col>
...

у другого компонента отличается строки:

  const onChange = (recaptchaValue) => {
    handleResetPassword(recaptchaValue);
  };
...
const [isBtnDisabled, setIsBtnDisabled] = useState(!!disableCaptcha);
...
{ recaptchaSiteKey && (
            <Recaptcha...

остановился на этом этапе...

const ReCaptchaContainer = ({
  recaptchaRef,
  recaptchaValue,
}) => {
  const [isBtnDisabled, setIsBtnDisabled] = useState(recaptchaValue);

  const onChange = useCallback((handleValue) => {
    handleValue(recaptchaValue);
    return () => { setIsBtnDisabled(isBtnDisabled); };
  }, [recaptchaValue]);

  const asyncScriptOnLoad = () => {
    setIsBtnDisabled(false);
  };
  return (
    <Recaptcha
      ref={recaptchaRef}
      sitekey={recaptchaValue}
      onChange={onChange}
      size="invisible"
      asyncScriptOnLoad={asyncScriptOnLoad}
    />
  );
};
ReCaptchaContainer.propTypes = {
  recaptchaRef: PropTypes.func.isRequired,
  recaptchaValue: PropTypes.func.isRequired,
};

export default ReCaptchaContainer;
}

(react-google-recaptcha-v2)


Ответы (0 шт):