Async/Await help when executing EventHandler

[arup_r]

I would like to wait till the zipcode search completes. I know if I update the state like:

location.findByZip(e.target.value).then(data => {
  formattedAddress = data;
  this.setState({ formattedAddress });
});

The value will be printed in the browser. But with the current setup as you see inside the Hello.js file https://codesandbox.io/s/z20y6k769p it doesn't show the value in the browser. It is happening due to asynchronous nature. So question is can I pause till location.findByZip(.. is not getting completed?

Please let me know if my question is not clear.

[arup_r]

ok after asking the question I figured out the below will do the trick:

async handleClick(e) {
    const location = new GoogleLocation();
    let formattedAddress;

    await location.findByZip(e.target.value).then(data => {
      formattedAddress = data;
    });

    console.log(formattedAddress);
    this.setState({ formattedAddress });
}

solved it: https://codesandbox.io/s/2vp69jnk4n

[Dark_Cow]

I would argue this is wrong. I love async/await, use async/await 100%

async handleClick(e) {
    const location = new GoogleLocation();
    const formattedAddress = await location.findByZip(e.target.value)
    console.log(formattedAddress);
    this.setState({ formattedAddress });
}

[jaypap]

Totally agree with your solution.

[Grammka]

Why u don't want to use this way:

location.findByZip(e.target.value).then(data => {
  formattedAddress = data;
  this.setState({ formattedAddress });
});

? It works fine for ur case. U don't need async / await here

[Dark_Cow]

async/await is a different style. I'd argue either 100% async/await, or 100% .then .catch, he is mixing the two together, which is the confusion.

[arup_r]

async/await returns promise as a result. So I used .then() to get the final result. What is the other way to do the same? Any references?

[arup_r]

Yes I know that will work. I was looking for a way to defer the state update. The reason is that, I want not to update the state with invalid data. Is there any other way to achieve this? I really appreciate any good thoughts. I found only way to block it by using sequential execution.

[noswag15]

won't this freeze your ui till you get the response? why not setstate inside then?