Reactjs – How does React props work with es6 and object inheritance between classes

I don’t even know if this is possible, something told me to do functional components but I am already too far deep into the code and I am scared to go back (this is an issue I must learn to tackle but I need confirmation possibly that it should be done this way). I am in one of those coding bootcamps and we have 2 days to learn React. I am currently doing a project and these are my files. This is due on Monday and I am exhausted and scared and need to finish asap so I came here to seek the wisdom of stack overflow developers. (I am also looking for a mentor so anyone willing to help me along my coding journey please let me know.) Some pseudocode is here to help me understand things, I am also using babel to compile as I go.

The problem is I am trying to get videos to show up on my site. exampleVideoData is an array of objects that have fake video data. We are trying to make a site similar to youtube, which means later on this example video data will be referenced via API’s. However I am having a difficult time getting understanding how to use the keyword "props". It seems to work when I put in a string, but when I try to reference the exampleVideoData in the property "videos" of my App object as the value it does not work. The class VideoList should be inheriting the information from App.

I’m thinking my this keyword is pointing to the wrong thing or maybe props is being misused. But I the more I toyed around with it the more janked up things became. So I ctrl-z’d back to this point when things still rendered to the page. I want my VideoPlayer element to have the exampleVideoData2. Here are the files and how they look:

App.js

import VideoPlayer from "/compiled/src/components/VideoPlayer.js";
import exampleVideoData2 from "../data/exampleVideoData2.js";
import VideoList from "/compiled/src/components/VideoList.js";
import Search from "/compiled/src/components/Search.js"

class App extends React.Component{
  constructor(props){
    super()
    this.videos = exampleVideoData2
  }
  
  render() { 
    return(
  <div>
    <nav className="navbar">
      <div className="col-md-6 offset-md-3">
        <div><h5><em>search</em> view goes here</h5></div>
      </div>
    </nav>
    <div className="row">
      <div className="col-md-7">
        <div><h5><VideoPlayer /></h5></div>
      </div>
      <div className="col-md-5">
        <div><h5><VideoList videos= { this.props.videos }/></h5></div>
      </div>
    </div>
  </div>
)};
}
//whatever happens here, happens there
// In the ES6 spec, files are "modules" and do not share a top-level scope
// `var` declarations will only exist globally where explicitly defined

export default App;

VideoList.js

import exampleVideoData2 from "/compiled/src/data/exampleVideoData.js";
import VideoListEntry from "/compiled/src/components/VideoListEntry.js"

class VideoList extends React.Component{ 
  constructor(props){
    super(props);
    this.videos = exampleVideoData2
  }  
  videos(){
    return(exampleVideoData2)
  }
  render(){ return (
  <div className="video-list">
    <div><h5> videos: {  this.props.videos }</h5></div>
    <div><h5><em>videoListEntry</em> view goes here</h5></div>
    <div><h5><em>videoListEntry</em> view goes here</h5></div>
    <div><h5><em>videoListEntry</em> view goes here</h5></div>
    <div><h5><em>videoListEntry</em> view goes here</h5></div>
  </div>
)};
};
// PropTypes tell other developers what `props` a component expects
// Warnings will be shown in the console when the defined rules are violated
VideoList.propTypes = {
  videos: PropTypes.array.isRequired,
};

// In the ES6 spec, files are "modules" and do not share a top-level scope.
// `var` declarations will only exist globally where explicitly defined.
export default VideoList;

TLDR; How do I get "props" or my VideoList to reference the exampleVideoData using object inheritance? Should I refactor everything to functional components? -cheers