Video Player Project React - Menu doesn't work

Hi everyone!
Was working on this video player project and everything was going well, until the end of course. I can’t change the video by using the menu buttons. Have watched the video and searched on this forum but can’t find the answer. If anyone can help me, it would be greatly appreciated!

Here’s my code:

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.chooseVideo = this.chooseVideo.bind(this); this.state = { src: VIDEOS.fast }; } chooseVideo(newVideo){ this.setState({ src: VIDEO[newVideo] }) } 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 { constructor(props){ super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e) { const text = e.target.value; this.props.chooseVideo(text); } render() { return ( <form onClick={this.handleClick}> <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> ); } }

You missed an “S” in “VIDEOS” on line 22 of your App.js file.

Thank you so much! :smiley:

1 Like