Input not being read properly in React function (no JSX)

Question

My end goal here is to do some very simple email validation and get my "next" button to disable or enable based on the validity of the email. I was testing my .isWorking() function (controls the boolean that is passed to the disabled attribute of the button) and when I test with email.length > 0, the function appears to work! But when I change it slightly to email.length > 4, the function does not work and just automatically returns "true", disabling the button. Any help at all would be appreciated--I am totally stuck on this and I would be so grateful!

const validEmailRegex = RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

class Signup extends React.Component {

constructor() {
    super();
    this.state = {email: ""};
    this.handleSubmit = this.handleSubmit.bind(this);
}

isWorking (event) {
    //testing function here 
    const email = event.target;
    if (email.length > 4 ) {
        return false;
    }
    return true;

    //if (validEmailRegex.test(email) === true) {
    //   return false;
    //}
    //return true;
    }

handleSubmit(event) {
    event.preventDefault();

    if (!event.target.checkValidity()) {
       this.setState({ invalid: true, displayErrors: true, 
    });
       return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
       const input = form.elements[name];
       const parserName = input.dataset.parse;
       console.log('parser name is', parserName);
       if (parserName) {
          const parsedValue = inputParsers[parserName](data.get(name));
       data.set(name, parsedValue);
       }
     }

     this.setState({
        res: stringifyFormData(data), invalid: false, displayErrors: false, 
     });
 }

render() {
    const { res, invalid, displayErrors } = this.state;

    //pass boolean to the button for disabling or not 
    const isEnabled = this.isWorking(event);

    return (
        React.createElement("div", { className: "container" },
        React.createElement("div", { className: "row" },

            React.createElement("form", { onSubmit: this.handleSubmit, noValidate: true, className: displayErrors ? 'displayErrors' : '' },
            React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}),),

            React.createElement("span", { className: "span"},
                 React.createElement("button", { className: "button1", disabled: isEnabled, type: "button"}, "next")
        ),));}}

Answer 1

class Signup extends React.Component {

constructor() {
    super();
    this.state = {email: "", isEnabled: true};
    this.handleSubmit = this.handleSubmit.bind(this);
}

isWorking (event) {
    //testing function here 
    const email = event.target.value;
    console.log(email.length)
    if (email.length > 4 ) {
        this.setState({ isEnabled: false});
    } else {
      this.setState({ isEnabled: true});
    }
    }

handleSubmit(event) {
    event.preventDefault();

    if (!event.target.checkValidity()) {
       this.setState({ invalid: true, displayErrors: true, 
    });
       return;
    }

    const form = event.target;
    const data = new FormData(form);

    for (let name of data.keys()) {
       const input = form.elements[name];
       const parserName = input.dataset.parse;
       console.log('parser name is', parserName);
       if (parserName) {
          const parsedValue = inputParsers[parserName](data.get(name));
       data.set(name, parsedValue);
       }
     }

     this.setState({
        res: stringifyFormData(data), invalid: false, displayErrors: false, 
     });
 }

render() {
    const { res, invalid, displayErrors } = this.state;

    //pass boolean to the button for disabling or not 
   // const isEnabled = this.isWorking(event);

    return (
        React.createElement("div", { className: "container" },
        React.createElement("div", { className: "row" },

            React.createElement("form", { onSubmit: this.handleSubmit, onChange:(e)=>this.isWorking(e), noValidate: true, className: displayErrors ? 'displayErrors' : '' },
            React.createElement("input", { className: "form-control", name: "formEmail", id: "formEmail", type: "email", placeholder: "email"}),),

            React.createElement("span", { className: "span"},
                 React.createElement("button", { className: "button1", disabled: this.state.isEnabled, type: "button"}, "next")
        ),)));}}