я есть следующий список объектов:

mediaList[
 {id:1, url:"www.example.com/image1", adType:"image/jpeg"},
 {id:2, url:"www.example.com/image2", adType:"image/jpg"},
 {id:3, url:"www.example.com/video1", adType: "video/mp4"}
]

Мне нужно создать слайд-шоу с настраиваемой продолжительностью (1 с, 5, 10 с). Пока что я могу создать список СМИ изmediaList

  renderSlideshow(ad){
    let adType =ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

 render(){   
    return(
      <div>
          {this.props.mediaList.map(this.renderSlideshow.bind(this))}
      </div>
    )
 }

То, что я хочу сделать сейчас, это генерировать медиа по одному с настраиваемой продолжительностью для автоматического воспроизведения.

Я знаю, что мне нужно использовать некоторую форму функции setTimeout, как этот пример:

setTimeout(function(){
         this.setState({submitted:false});
    }.bind(this),5000);  // wait 5 seconds, then reset to false

Я просто не уверен, как реализовать это для этого сценария. (Полагаю, мне нужно будет использовать CSS для переходов затухания, но я просто озадачен тем, как создать переход в первую очередь)