Email Validation in React Functional Component-CodePudding

Using React functional component, I'm trying to validate the email address. Below is my code.

Problem is when I tried to enter any text nothing happens, its not allowing any letters to be entered.

Below is my component code, Please help me out

const UpdateEmailAddress: React.FC<Step> = (props: Step) => {
  const [customerEmail, setCustomerEmail] = useState<any>('');
  const [checkValidEmail, setcheckValidEmail] = useState<boolean | null>(null);
    
  const emailValidate = (value: any) => {
    if (!validEmailRegex(value)) {
      setcheckValidEmail(true);
    } else {
      setcheckValidEmail(false);
    }
  };

  const handleChange = (e: any) => {
    if (e.target.value) {
      setCustomerEmail(e.target.value);
    }
  };

  return (
    <>
      <div className="step container update-email-container pt-10" ref={props.domRef}>
        <div className="row">
          <div className="col-md-4">
            <div className="mb-4">
              <TextField
                aria-label={content.emailAddress.header}
                enableClearText
                errormessage={content.emailAddress.emailError}
                helptext={content.emailAddress.helptext}
                id="emailAddress"
                isValid={checkValidEmail}
                label={content.emailAddress.emailAddress}
                maxLength={0}
                name="emailAddress"
                tooltipText=""
                type="email"
                onChange={(e:any) => handleChange(e)}
                value={customerEmail}
              />
            </div>

            <ButtonAction
              onClick={emailValidate(customerEmail)}
              className="load-more-button mb-0"
              type="button"
              aria-label={content.emailAddress.nextButton}
            >
              {content.emailAddress.nextButton}
            </ButtonAction>
          </div>
        </div>
      </div>
    </>
  );
};

CodePudding user response：

Your logic in onChange method is wrong it should be

onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCustomerEmail(e.target.value)}

CodePudding user response：

You have to define the onChange() method.

It should be like this

const handleChange = (e) => {
    setCustomerEmail(e.target.value);
  };

Then you will be able to enter textfield.

Secondly, you have to pass the value in emailvalidate() in onClick() of button.

<ButtonAction onClick={()=>emailValidate(customerEmail)} className="load-more-button mb-0" type="button" aria-label={content.emailAddress.nextButton}>
              {content.emailAddress.nextButton}
            </ButtonAction>

And remove e parameter in emailValidate(value) as it is only using value and not e.