title: How to use API data in React
body: <p>I have a React app in in which I have to make calls to an API. I created a <code>dataService.js</code> where I will create all the functions with the calls to my API.</p>
  <p>In the component in which I need to retrieve the data, I simply try to console.log the data but I have a <code>Promise {&lt;pending&gt;}</code> instead of the result I need... What can I do to retrieve the data ?</p>
  <p>My initial idea is to retrieve all the data I need using this <code>dataService.js</code> and setting the state of the component with the data. I guess it is possible but how ?</p>
  <p><strong>dataService.js</strong>:</p>
  <pre><code>export const dataService = {dataValue};
  
  function dataValue() {
      return axios.get('url/to/api')
          .then(response =&gt; {
              console.log(response.data.soc) //this works well !
              let soc = response.data.soc
              return soc;
          });
  }
  </code></pre>
  <p><strong>myComponent.js</strong>:</p>
  <pre><code>class myComponent extends Component {
      render() {
          let test = dataService/dataValue(); // I imported the dataService !
          console.log(test);
          return (&lt;div&gt;&lt;/div&gt;);
      }
  }
  </code></pre>