console log of returned value shows a unusable response even after chaining a then to it

Im trying to return a promise is a javascript file. However, there is a weird issue. So when I console log the returned value within the function, it shows the following:

const id = getAccounts()
  .then(res => res.find(acc => acc.type === ACCOUNT_TYPES.STARTER))
  .then((res) => { return res.id });

  console.log(id.then(res => res))

Is there anything I am missing? Have been dealing with this and research for the whole day. If anyone can help, I would highly appreciate it!

Updated section:

const initialState = {
  currentAccountId: id.then((res) => { return res; }) || ''
};

The return value of calling a Promise's .then is always another Promise. By setting currentAccountId to id.then, it will always be a Promise.

You need to call this.setState from inside the Promise's resolve function:

componentDidMount() {
  getAccounts()
    .then(res => res.find(acc => acc.type === ACCOUNT_TYPES.STARTER))
    .then((res) => { this.setState({ currentAccountId: res }); });
}  

Use componentDidMount, like the React docs suggest, to initiate an async request. "If you need to load data from a remote endpoint, this is a good place to instantiate the network request."

Original answer

id.then will always return a new Promise, and that's what you are logging. To log the actual value you can move the console.log inside the resolve function:

id.then(res => console.log(res))