Выборка цикла в reactjs

Ваш цикл for не выполняет итерацию асинхронно, но вы можете обойти это, поместив цикл for внутри функции Асинхронный процесс внутри цикла JavaScript forasync и awaiting в результате асинхронных операций.

videoUrls = async () => {
  let i=0;
  let urllist=[]
  for(i;i< this.state.data.length;i++){
      const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      const json = await response.json()
      urllist.push(json.items[0])
      console.info({urllist})
    }
 }

Это предотвращает увеличение цикла for до тех пор, пока не будут завершены выборка и преобразование ответа в json.

Можно использовать Promise.all

videoUrls = () =>{
  const promises = this.state.data.map(item => {
    return fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      .then(response=> {
      return response.json()
    });
  });

  Promise.all(promises).then(results => {
    const videos = results.map(result => result.items[0]);
    console.info(videos);
    this.setState({videos});
  })
}