title: How to render results from Axios function with mapping
body: <p>I'm trying to display the results from an axios function in React. The mapping is already defined within the function, but I'm only able to console log the results defined within the first 'then' </p>
  
  <p>I have tried both componentDidMount() and just mapping out in the render return, but am unable to get it working. I understand there are other ways such as mounting the results to the state and mapping the state within the component render, but I am trying to obtain the results directly from this getReactResults() function.</p>
  
  <pre><code>const API_URL = 'https://api.testapi.com/?query=test';
  
  
  const getReactResults = () =&gt; axios.get(API_URL)
      .then((res) =&gt; res.data.items)
        .then((mul) =&gt; mul.map(({name, url}) =&gt; ({
          name,
          url
        })
      )
    );
  
  class Rel extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
   componentDidMount(){
     let results = this.getReactResults();
     console.log(results);
   }
  
    render(){
      return(
        &lt;div&gt;
          &lt;ul&gt;
            {results.map((item, i) =&gt; &lt;li key={i.name}&gt;{i.name &lt;/li&gt;)}
          &lt;/ul&gt;
         &lt;/div&gt;
      )
     }
  }
  </code></pre>
  
  <p>I am getting an error of 'result' is not defined, but the result should be displaying the results from the API. </p>