I'm hoping someone could help me with this project:

I'm calling a function that uses axios to get data from an API, I keep getting [object Promise].

I tried: getAPIdata().then(function(data){console.log(data)}) and I get the data correctly printed on the console. But what I need, is to return the data so it can be mapped.

I tried:

getAPIdata().then(function(data){return data}) but this simply returns [object Promise]

which is the same thing I get if I simply do:

getAPIdata() it also returns [object Promise]

Does anyone know how I can get the data returned properly? For reference, I've added the code samples below.

Please let me know. Thanks.

getAPIdata = async () => {
   const axios = require('axios').default;
   try{
      return await axios.get('URL').then(content => content.data);
   } catch (error){
      throw{
         code: error.code,
         message: error.message,
         responseStatus: error.response?.status, 
         url
      };
   }
}    
getAPIdata().then(function(data){console.log(data)})  // returns data to console
getAPIdata().then(function(data){return data})   // returns [object Promise]

Update: getAPIdata().then(function(data){return data}) is then passed as a prop to another component. the prop is called selection

function Select(props){
   const {selection} = props;
   return(
      <Select>
         {console.log(typeof selection)} //returns object
         <MenuItem value="">None</MenuItem> //Default value
         {
            **selection.map(
            data =>(<MenuItem key={data.id} value={data.id}>{data.name}</MenuItem>)**
            )
         }

      </Select>
   )

Ultimately I get that selection.map is not a function, which is what led me to assume this is an issue with the data not being returned properly. The Select and MenuItem components are from Material-UI.