How in React do I return a number?

Question

In react all I want to do is lookup and return a number. I have:

  getVAL = async ()  => {
    const pathParam = this.props.match.params.myVal;
    const url = "get-myVal?myVal=" + pathParam;
    const response = await this._axios.get(url);
    const intmyVal = Number(response.data);
    return   Number (intmyVal)
  };

and I use this:

 myVal=this.getVAL();

but when I render...

  myVal={this.myVal}

I get Type 'Promise<number>' is not assignable to type 'number'. Completely new to this weird world, so any pointers are appreciated.

EDIT: With jonrsharpe's help (any mistakes, mine) I now have:

myIdPromise=this.getID();

myIdPromise.then(don't know what to put here to just get a number {
   ...
})

Does this answer your question? [Why is my asynchronous function returning Promise { } instead of a value?](https://stackoverflow.com/questions/38884522/why-is-my-asynchronous-function-returning-promise-pending-instead-of-a-val) — jonrsharpe, Mar 10 '21 at 12:55
You're getting the compile time equivalent, but the compiler's telling you the right thing. — jonrsharpe, Mar 10 '21 at 12:56
Surely you can say in React I want a number from an async method? — schoon, Mar 10 '21 at 13:25
`async` functions **always** return promises - _in JavaScript_, not just React or TypeScript. — jonrsharpe, Mar 10 '21 at 13:29
OK, sorry to doubt you. So `.then` is needed somehow or other? Where might it go? — schoon, Mar 10 '21 at 13:33

score 0 · Accepted Answer · answered Mar 16 '21 at 11:01

0

This worked:

async getIDPromise(): Promise<Number> {
...
  return   intmyVal
}

async getID(): Promise<Number> {

  const value = await this.getIDPromise()

answered Mar 16 '21 at 11:01

schoon

2,858
3
46
78

How in React do I return a number?

1 Answers1