title: how to write service kind of function in React which can fetch then return data using input params of function
body: <p>I am new bee to React and from angular background. I a trying to write reusable function which can process API calls using input(country code) and can return data to components. so that i can use that data as per my needs in side components.</p>
  
  <pre><code>import React, {Component} from 'react';
  const APIService=function(countrycode){
  let newsData=[];
  fetch(process.env.REACT_APP_API_URL+'top-headlines? 
     country='+countrycode+'&amp;apiKey='+process.env.REACT_APP_API_KEY)
     .then((responce) =&gt;{
    return responce.json()
  }).then(data =&gt; {
    newsData=data;
    //Got data hear
    console.log(data);
   return newsData
  }).catch(error=&gt;{
    return(&lt;div&gt;Somethinhg went wrong. Sorry forinconvinance&lt;/div&gt;)
  })
  }
  export  default APIService;
  </code></pre>
  
  <p>and in side my component</p>
  
  <pre><code>import React from 'react';
  import APIService from '../APIService/APIService';
  export default class LatestNews extends React.Component {
  constructor(){}
  
  componentWillMount(){
  //Not getting Data hear
  console.log(APIService('us'))
  
  }
  }
  </code></pre>
  
  <p>I am getting 'undefined'. i knew i have 2 issues here. 
  one is how to return data from APIService function
  second is how to make component to wait until data comes.</p>
  
  <p>i tried componentDidMount() as well. but not worked. Want to simplyfy the process, so dont want to put any JSX syntax in component to pass params in terms of props.</p>