One react player start another react player automatically to stop

Question

react player npm
We are using multiple react player in one Component, when starting one more player all are playing at the same time. I need One react player start automatically to stop another react player.Here attached a sample image

Answer 1

You could easily set key of the video that user clicked and started playing and set playing true only if id/key matches.

     // set key of the video user started playing 
     const [activeIndex, setActiveIndex] = useState(false); 

     //Looping video player
    {episodes && episodes.map((episode, key) => {
       <ReactPlayer
        id="VideoPlayer"
        url={someurl}
        className='react-player'
        playing={activeIndex === ky  ? true : false}
       >
      )}