Tengo un reproductor de video y una barra lateral de otros videos para reproducir. Quiero poder hacer clic en un video de la barra lateral y mostrarlo en el reproductor de video, reemplazar el video predeterminado y eliminarlo de la barra lateral, colocando el video reemplazado en su lugar. (Actualmente, los videos son solo carteles, ya que todavía no hay una fuente de video real).

Actualmente, configuré el video predeterminado en el índice 0 de mi JSON, y configuré un estado que está conectado a la barra lateral que muestra todos los videos.

Creo que puedo usar un detector de eventos que tome la identificación (o el índice, ya que eso es lo que se usa para mostrar el video predeterminado) del video en el que se hizo clic y lo usa para actualizar el video activo a través del estado. Sin embargo, no estoy seguro de cómo implementar esto y luego ocultar el video activo de la barra lateral.

Aplicación.js:

 class App extends Component { state = { videos: videos, activeVideo: videos[0], }; render(props) { return ( <> <Header /> <VideoPlayer activeVideo={this.state.activeVideo} /> <LowerSection videos={this.state.videos} /> </> ); } }

Barra lateral de vídeo:

 const NextVideo = (props) => { const videos = props.videos; return ( <section className="nextVideosSection"> <div className="nextVideosSection__content"> {videos.map((data) => { return ( <> <div className="nextVideosSection__image"> <img className="nextVideosSection__thumbnail" src={data.image} alt="thumbnail" />{" "} </div> <div className="nextVideosSection__text"> <p className="nextVideosSection__videoTitle">{data.title}</p> <p className="nextVideosSection__videoChannel"> {data.channel} </p> </div> </> ); })} </div> </section> ); };

Formato JSON:

 { "id": "someID", "title": "someTitle", "channel": "someChannel", "image": "someImage.jpg" //This is used for the video player poster },,,