Email Validation in React Functional Component

Question

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>
    </>
  );
};

Rahul · Accepted Answer · 2022-03-25 05:44:04Z

1

Your logic in onChange method is wrong it should be

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

answered Mar 25, 2022 at 5:44

Rahul

4051 gold badge4 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arun Kumar Over a year ago

Uncaught TypeError: Cannot read properties of undefined (reading 'value') I get this error

Rahul Over a year ago

can you share your component on codesandbox.io

Arun Kumar Over a year ago

I've added the entire component code, check if that helps

Rahul Over a year ago

above code should work. Are you using material ui ?

Arun Kumar Over a year ago

No, We're using built in components

|

score 0 · Accepted Answer · 2022-03-25 06:00:36Z

0

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.

edited Mar 25, 2022 at 6:00

answered Mar 25, 2022 at 5:53

user12417761

6 Comments

Arun Kumar Over a year ago

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. now getting this error

Ayushi Keshri Over a year ago

@ArunKumar onChange={(e) => handleChange(e)} this shall remove the re-render issue

Arun Kumar Over a year ago

No it didn't, I was already using like that only, issue is still coming

user12417761 Over a year ago

Try this onClick={emailValidate(customerEmail)}

Arun Kumar Over a year ago

@mohitmaroliya already onClick={emailValidate(customerEmail)} is added to button component

|

Collectives™ on Stack Overflow

Email Validation in React Functional Component

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related