I have a video player and a sidebar of other videos to play. I want to be able to to click a video from the sidebar and display it on the video player, replacing the default video, and remove it from the sidebar, putting the replaced video in its place. (The videos are currently just posters as there's no actual video source yet).

Currently, I've set the default video to index 0 from my JSON, and I've set a state that is connected to the sidebar which displays all the videos.

I believe I can use an event listener that takes the id (or index as that's what's being used to display the default video) of the clicked video and uses it to update the active video via the state. However, I'm not sure how to implement this and then hide the active video from the sidebar.

App.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} />
      </>
    );
  }
}

Video Sidebar:

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>
  );
};

JSON format:

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