How do I print the promise value from a post request? (ReactJs)

Question

I've been trying to figure out how to access the promise value passed back from the POST request, but so far the solutions I've seen on here I can't get my head round how to implement in a functional component not using .then .

I've tried .stringify and .text , but no difference. It's still only console logging the promise.

Button.jsx

import React, { useState } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken] = useState(getToken());
   console.log(xappToken);

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

getToken.jsx

export default async function getToken(){
   try {
     const response = await axios.post('https://api.artsy.net/api/tokens/xapp_token', {
         client_id: 'some-client-id',
         client_secret: 'some-client-secret'
     });
     console.log('👉 Returned data:', response.data.token);
     return  response.data.token;
   } catch (e) {
     console.log(`😱 Axios request failed: ${e}`);
     return "Error";
   }
}

Answer 1

That's because getToken is a promise. You can do this:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken, setXappToken] = useState(null);
   useEffect(() => {
     getToken().then(token => setXappToken(token))
   }, [])
   console.log(xappToken)

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

Answer 2

if i remember correctly since you're getting a promise your gonna have to await the response as well. you have to json() your response and store it into something else then console.log the new result for example

const result = await response.json()
console.log(result)

Answer 3

Try this one:

import React, { useState } from 'react';
import axios from 'axios';
import getResponse from '../Handler/getResponse.jsx'
import getToken from '../Handler/getToken.jsx'
import './Button.css';

const Button = async ({selectedIcon}) => {
   const [selected] = selectedIcon;
   const [xappToken] = useState(await getToken());
   console.log(xappToken);

   return(
      <div className="buttonBlock">
         <span className="btn">
            <input className="btn-outline" type="button" value="Press Me" onClick={ () => getResponse(xappToken) }/>
         </span>
      </div>
   );
}

export default Button

Answer 4

I guess you also need to do an async await in the Button.jsx:

    const Button = async ({ selectedIcon }) => {
        const [selected] = selectedIcon;
        const [xappToken] = useState(await getToken());
        console.log(xappToken);
    };

Since getToken is well, technically a promise. So you need to do an await before accessing the value of that.