title: loop fetch in reactjs
body: <p>So basically i created a loop that takes values from an array and puts those values in a a loop using the youtube api . The youtube link works fine if I access it from within the loop, but outside the loop '(when i run the console.log({urllist})', i get an empty array.What I want to do is  push all the values into the urllist empty array then transfer for them to the state variable('videos')</p>
  
  <p>The function I am referring to is the videoUrls</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>class MusicCharter extends React.Component{
   constructor(){
      super();
      this.state= {
        data:[],
        videos:[],
    }
   }
  
   componentDidMount(){
    XHR.onreadystatechange = function(){
      if(XHR.readyState === 4 &amp;&amp; XHR.status === 200) {
          var url = XHR.responseText;
          this.setState({data:(JSON.parse(url).tracks.track)})
      }
    }.bind(this)
    
    XHR.open("GET","http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&amp;api_key=xxxxxxx&amp;format=json");
    XHR.send();
  }
  
  videoUrls=()=&gt;{
    let i=0;
    let urllist=[]
    for(i;i&lt; this.state.data.length;i++){
        fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&amp;q=${this.state.data[i].name}&amp;key=xxxxxxxxxxx0`)
        .then(response=&gt; {
          return response.json()
      })
       .then(data=&gt;{
          return(urllist.push(data.items[0]))})
     }
     console.log({urllist})
   }</code></pre>
  </div>
  </div>
  </p>