Hello, I’ve read through other peoples questions and answers and gone through my code over and over but can’t seem to find my error.
I am able to render the video but selecting the buttons is not changing the video. When I inspect, it says I have a typeerror : cannot read properties of "null " reading ‘props’.
What ridiculously simple thing am I not seeing???
import React from "react";
import ReactDOM from "react-dom";
import { Video } from "./Video";
import { Menu } from "./Menu";
const VIDEOS = {
fast: "https://content.codecademy.com/courses/React/react_video-fast.mp4",
slow: "https://content.codecademy.com/courses/React/react_video-slow.mp4",
cute: "https://content.codecademy.com/courses/React/react_video-cute.mp4",
eek: "https://content.codecademy.com/courses/React/react_video-eek.mp4",
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = { src: VIDEOS.fast };
this.chooseVideo = this.chooseVideo.bind(this);
}
chooseVideo(newVideo) {
this.setState({
src: VIDEOS[newVideo]
});
}
render() {
return (
<div>
<h1>Video Player</h1>
<Menu chooseVideo={this.chooseVideo} />
<Video src={this.state.src} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));