Hi,
I’m going through this following project: Video Player
At step 5 when I add the bind statement the whole app stops rendering, I very much a beginner so go easy on me!
As soon as I delete the bind statement I comes back. Hopefully someone can see what’s causing this.
App.js
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);
}
chooseVidea(newVidea) {
set.setState({
src: VIDEOS[newVideos]
});
}
render() {
return (
<div>
<h1>Video Player</h1>
<Menu chooseVideo={this.chooseVideo}/>
<Video src={this.state.src}/>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
Video.js
import React from 'react';
export class Video extends React.Component {
render() {
return (
<div>
<video controls autostart autoPlay muted
src={this.props.src}/>
</div>
);
}
}
Menu.js
import React from 'react';
export class Menu extends React.Component {
render() {
return (
<form onClick={this.props.chooseVideo}>
<input type="radio" name="src" value="fast" /> fast
<input type="radio" name="src" value="slow" /> slow
<input type="radio" name="src" value="cute" /> cute
<input type="radio" name="src" value="eek" /> eek
</form>
);
}
}