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() {

    let videosPlayState = localStorage.getItem("videosPlayState") || "{}";

    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) {

    event.target.seekTo(this.state.videosPlayState[videoId] || 0);

  }

  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.