Asynchronous functions,promises

Question

This is very small code where I started to learn callbacks and promises.The problem here is have use async function an await.but it doesn't wait for the return.Prints the value as undefined.

import React from 'react';

export default function App () {


  function generaterandomNumber(){
    let promise = new Promise(function(resolve, reject) {
      setTimeout(() => {
        var Number=Math.floor(Math.random() * 10);
        if(Number % 2 === 0){
          console.log("resolve")
          resolve(Number)
          return Number;
        }else{
          reject("Odd")
        }
      }, 500);
    });
  }
  

 
  async function handleClick(event){
    console.log("Before")
    var x = await generaterandomNumber();
    console.log(x)
    console.log("After")
    event.preventDefault();
  }

  

    return (
      <div style={{textAlign: 'center'}}>
        <h1>Random Number generator</h1>
        <button onClick={handleClick}>Generate</button>
      </div>
    );
  
}

And also if you know good video or documentation material regarding callbacks,async functions,promises please let me know since I have no clear idea about this callbacks

Answer 1

You must return Promise object .

await work with promise edit

 function generaterandomNumber(){
        return new Promise(function(resolve, reject) {
          setTimeout(() => {
            var Number=Math.floor(Math.random() * 10);
            if(Number % 2 === 0){
              console.log("resolve")
              resolve(Number)
              return Number;
            }else{
              reject("Odd")
            }
          }, 500);
        });
      }

https://javascript.info/async