title: Proper way to fetch from another component - ReactJS
body: <p>I have a component that fetches the data properly but I want to encapsulate it in a helper. I've tried many things but I'm stuck.</p>
  <p>This is the component that works:</p>
  <pre><code>export const Carousel = () =&gt; {
  
  const [ lotteries, setLotteries ] = useState({});
  const [ isLoading, setisLoading ] = useState(true);
  
  useEffect(() =&gt; {
      
      async function fetchAPI() {
          const url = 'https://protected-sea-30988.herokuapp.com/https://www.lottoland.com/api/drawings;'
          let response = await fetch(url)
          response = await response.json()
          
          setLotteries(response)
          setisLoading(false)
          }
      
          fetchAPI()
  }, [])
  
  return (
  
      &lt;&gt;
          {
              isLoading ? (
                  &lt;span&gt;loading&lt;/span&gt;
              ) : (
  
              &lt;Slider &gt;
                  {
                  Object.keys(lotteries).map((lottery, idx) =&gt; {
                      return (
                          &lt;Slide 
                              key={ idx }
                              title={ lottery }
                              prize={ lotteries[lottery].next.jackpot }
                              day={ lotteries[lottery].next.date.day }
                          /&gt;
                      )
                  })
                  }
              &lt;/Slider&gt;
          )}
      &lt;/&gt;
  );}
  </code></pre>
  <p>And this is the last thing I've tried so far. This is the component without the fetch</p>
  <pre><code>export const Carousel = () =&gt; {
  
  const [ lotteries, setLotteries ] = useState({});
  const [ isLoading, setIsLoading ] = useState(true);
  
  useEffect(() =&gt; {
      
      getLotteries()
      setLotteries(response)
      setIsLoading(false)
        
  }, [])
  </code></pre>
  <p>And this is where I tried to encapsulate the fetching.</p>
  <pre><code>export const getLotteries = async() =&gt; {
  
      const url = 'https://protected-sea-30988.herokuapp.com/https://www.lottoland.com/api/drawings;'
      let response = await fetch(url)
      response = await response.json()
  
      return response;
      
  }
  </code></pre>
  <p>I'm a bit new to React, so any help would be much appreciated. Many thanks.</p>