Run code after multiple methods resolve with Async and Await

Question

I have three methods:

isSixCharactersLong(event) {
    const input_len = event.target.value.length;

    if (input_len === 6) {
        this.setState({isSixCharactersLong: true})
    } else {
        this.setState({isSixCharactersLong: false})
    }
}

isAlphanumeric(event) {
    const input_str = event.target.value;

    for (let i = 0; i < input_str.length; i++) {
        const code = input_str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
            !(code > 64 && code < 91) && // upper alpha (A-Z)
            !(code > 96 && code < 123)) { // lower alpha (a-z)
            this.setState({isAlphanumeric: true});
        } else {
            this.setState({isAlphanumeric: false});
        }
    }
}

isEmpty(event) {
    event.target.value ? this.setState({inputIsBlank: false}) : this.setState({inputIsBlank: true});
}

What I want to do is run a function after these three methods have resolved. So then I wrote the following:

async handleValidation(e) {
    this.isAlphanumeric(e);
    this.isEmpty(e);
    this.isSixCharactersLong(e);
}

And then I have this final method that gets triggered by my React application.

handleOnChange = async (e) => {
    await this.handleValidation(e)
        .then(() => this.setState({code: e.target.value}))
};

I would think this will work, but I keep getting an error that e is null . Somehow, I lose the event .

What I believe the problem is, it's that I'm not using async and await on the correct methods.

Answer 1

You can reduce this code down to,

handleOnChange = (e) => {
  const { value } = e.target
  const isAlphanumeric = /^[a-z0-9]+$/i.test(value)
  const isSixCharactersLong = value && value.length === 6
  const inputIsBlank = !!value // or Boolean(value)

  this.setState({ isAlphanumeric, isSixCharactersLong, inputIsBlank })

  if (!inputIsBlank && isAlphanumeric && isSixCharactersLong)
    this.setState({ code: value })
}

/^[a-z0-9]+$/i : Regular expression to test for alphaumerics case insensitively

!! : Type coercion to boolean ie if value is empty it will be falsy, the double negation turns it into true and back to false

Edit

As per the discussion in the comments, in order to set code only if the input is valid, I have added an if statement which essentially translates into, if the value is not blank ( !inputIsBlank ) and if the value is alphanumeric and if the input is six characters long then set code to value .

Answer 2

You are using async await in both functions when nothing is a promise, this is all synchronous code, so you actually don't need async await to solve this problem. maybe write your validation code to throw an error if something doesn't pass and then inside of handleOnChange you can run a ternary

 handleOnChange = (e) => {
    !this.handleValidation(e)? return :
         this.setState({code: e.target.value}))
};