title: Receiving Promise {<pending>} back from .then()
body: <p>I have an API call in <code>api.js</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> export const getGraphData = (domain, userId, testId) =&gt; {
     return axios({
       url: `${domain}/api/${c.embedConfig.apiVersion}/member/${userId}/utests/${testId}`,
       method: 'get',
     });
   };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a React helper that takes that data and transforms it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { getGraphData } from './api';
  
  const dataObj = (domain, userId, testId) =&gt; {
  
    const steps = getGraphData(domain, userId, testId)
    .then((result) =&gt; {
      return result.attributes;
    });
  
    console.log(steps);
  
    // const steps = test.get('steps');
    const expr = /select/;
  
    // build array of steps that we have results in
    const resultsSteps = [];
  
    steps.forEach((step) =&gt; {
      // check for types that contain 'select', and add them to array
      if (expr.test(step.get('type'))) {
        resultsSteps.push(step);
      }
    });
  
    const newResultsSteps = [];
  
    resultsSteps.forEach((item, i) =&gt; {
      const newMapStep = new Map();
      const itemDescription = item.get('description');
      const itemId = item.get('id');
      const itemOptions = item.get('options');
      const itemAnswers = item.get('userAnswers');
      const newOptArray = [];
      itemOptions.forEach((element) =&gt; {
        const optionsMap = new Map();
        let elemName = element.get('value');
        if (!element.get('value')) { elemName = element.get('caption'); }
        const elemPosition = element.get('position');
        const elemCount = element.get('count');
  
        optionsMap.name = elemName;
        optionsMap.position = elemPosition;
        optionsMap.value = elemCount;
        newOptArray.push(optionsMap);
      });
      newMapStep.chartType = 'horizontalBar';
      newMapStep.description = itemDescription;
      newMapStep.featured = 'false';
      newMapStep.detailUrl = '';
      newMapStep.featuredStepIndex = i + 1;
      newMapStep.id = itemId;
      newMapStep.isValid = 'false';
      newMapStep.type = 'results';
      const listForNewOptArray = List(newOptArray);
      newMapStep.data = listForNewOptArray;
      newMapStep.userAnswers = itemAnswers;
      newResultsSteps.push(newMapStep);
    });
  
    return newResultsSteps;
  };
  
  export default dataObj;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue is <code>steps</code>, when logged outside the <code>.then()</code> returns a <code>Promise {&lt;pending&gt;}</code>. If I log <code>results.attributes</code> inside the <code>.then()</code>, I see the data fully returned.</p>