Context

Newer to React; I have a parent component that is generating anywhere from 1-6 youtube videos, using react-youtube components. The Idea is that the YouTube components will be generated dynamically based on youtube video ids in an array. Currently, I'm generating the components like

this.state.videoIds.map((videoId, index) =>
 <YouTube
 key=index
 opts=opts
 videoId=videoId
 onReady=this._onReady />
 )

As far as generating the components, it's working as expected. However, the issue is, when this.state.videoIds gets updated, it causes all of the YouTube components to be refreshed. That behavior makes sense to me.

Issue

The issue I have is the following: If the functionality stays the same, I need a way to be able to track each of the YouTube components player time, so that if a refresh happens, I can pass that data back down to the components when they are refreshed so they are able to be played from where they left off.

So my question is, is there a way to dynamically generate these components without needing to refresh all of the existing components?

For what it's worth, I have thought about just having a parent component that will statically add the components for each use case, but that seems awfully clunky, and I don't really want to go that route.

Edit

This feels relevant, I'm divvying up the screen space evenly based on how many players are loaded at any given time, code looks like the following:

calculateVideoWidth = () => 
 if (this.state.videoIds.length <= 3) 
 return (document.body.clientWidth - 15) / this.state.videoIds.length;
 else 
 return (document.body.clientWidth - 15) / this.MAX_NUMBER_OF_COLUMNS;
 
 ;

 calculateVideoHeight = () => 
 if (this.state.videoIds.length <= 3) 
 return window.innerHeight - 4;
 else 
 return (window.innerHeight - 4) / this.MAX_NUMBER_OF_ROWS;
 
 ;

In my render method, I'm doing the following:

let opts = 
 height: this.calculateVideoHeight(),
 width: this.calculateVideoWidth()
 ;

After looking at @Tholle's comment, it occurs to me that the 'reload' is coming from the resizing. Which I guess makes sense. There has to be a better way to do this?

Edit 1

Check out this link to see what I am experiencing: Video App. In the input box, just add a video id separated by a ','.

This code might help you to start video from wherever user left.
The thing is we need to maintain or store the last played state of video wherever user left, some where permanently not erasable on reload, so here implemented using localStorage.

import React from "react";
import ReactDOM from "react-dom";
import YouTube from "react-`enter code here`youtube";

class App extends React.Component 
 state = 
 videoIds: ["2g811Eo7K8U"],
 videosPlayState: 
 ;

 componentDidMount() "";
 this.setState(
 videosPlayState: JSON.parse(videosPlayState)
 );
 

 addVideo = () => 
 this.setState(prevState => (
 videoIds: [...prevState.videoIds, "9kBACkguBR0"]
 ));
 ;

 _onStateChange = (event, videoId) => 
 let newPlayState = ...this.state.videosPlayState
 ;
 newPlayState[videoId] = event.target.getCurrentTime();
 localStorage.setItem("videosPlayState", JSON.stringify(newPlayState));
 ;

 _onReady(event, videoId) 
 render() 
 const opts = 
 height: "200",
 width: "400",
 playerVars: 
 autoplay: 1
 
 ;
 return ( <
 div className = "App" >
 <
 div className = "video-container" > 
 this.state.videoIds.map((videoId, index) => ( <
 YouTube onStateChange = 
 event => 
 this._onStateChange(event, videoId);
 
 
 onReady = 
 event => 
 this._onReady(event, videoId);
 
 
 key = 
 index
 
 videoId = 
 videoId
 
 opts = 
 opts
 
 className = 
 "item"
 
 />
 ))
 <
 /div> <
 div >
 <
 button onClick = 
 this.addVideo
 > Add video < /button> <
 /div> <
 /div>
 );
 

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

here is the css:

.video-container .item 
 padding: 25px;
 display: inline-block;

.video-container 
 display: flex;
 flex-wrap: wrap;

here is a link might help you enter link description here

After playing with flexbox a bit more, I was able to solve this issue. I ended up with the following:

html, body, #root, #root > div, div.container, iframe 
 width: 100%;
 height: 100%;
 margin: 0;


div.container 
 display: flex;
 flex-wrap: wrap;


span 
 flex-basis: 33%;
 flex-grow: 1;

For reference, here is my jsx

 <div>
 <div className="container">
 this.state.videoIds.map((videoId, index) =>
 <YouTube
 id="flex-item"
 key=index
 videoId=videoId
 onStateChange=this._onStateChange
 onReady=this._onReady/>
 )
 </div>
 </div>

I figured this could be done with flexbox, but I hadn't come up with the solution for it yet. I hope this helps someone else out.