Boolean State Value Changes to Undefined on Second onSubmit

Question

I'm working on a React project and implementing email validation and setting the state to true when it doesn't pass and false when it does. Validation part works, but getting undefined state on second onSubmit.

A bit more detail: I'm checking the state onChange and onSubmit. onChange seems to work as expected. onSubmit does work on the first click/submit but the very next click/submit, it changes the state to 'undefined' and I have no idea why.

Best to view my codepen and start filling in the email field and checking the console as I'm logging the state.

Here's a snippet of the code:

this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  show: true,
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
return re.test(email);
}

handleOnChange = e => {
const { name, value } = e.target;

const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      email: emailInput,
    },
    errors: {
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}

console.log('errors.email onChange = ' + this.state.errors.email);
};

So, why is this happening? and how can I solve?

Answer 1

You have missed the else condition when the field is not empty. that will remove the error object key from state, that is the one gives you the undefined error.

rewrite the handleSubmit function like this.

    handleSubmit = (e, slackPost) => {
    e.preventDefault();

     console.log('errors.email onClick = ' + this.state.errors.email);

    let inputFields = document.getElementsByClassName('form-input');
    let invalidEmailMessage = document.querySelector('#invalid-email-message');
    let failMessage = document.querySelector('#fail-message');
    let failMessageBox = document.querySelector('.alert-fail');

    // empty array to house empty field names
    const emptyFieldNames = [];

    // empty object to house input state
    let errors = {};

    // loop through input fields...
    for (var i = 0; i < inputFields.length; i++) {
      if (inputFields[i].value === '') {
        let inputName = inputFields[i].name;
        // add name to new array
        emptyFieldNames.push(inputFields[i].getAttribute('name'));
        // add input name and value of true to new object
        errors[inputName] = true;
        failMessageBox.style.display = 'block';
      } else {
        let inputName = inputFields[i].name;
          errors[inputName] = false;
      }
    }
    debugger;
    this.setState({ errors });

    if (emptyFieldNames.length > 0) {
      failMessage.innerHTML =
        'Please complete the following field(s): ' + emptyFieldNames.join(', ');
    } else if (this.state.errors.email === true) {
      invalidEmailMessage.innerHTML = 'Please enter a valid email';
    } else {
      console.log('For Submitted!');
    }

  };