Learn ReactJS: Part II Video Player

Hi there,

I’m working on this:

https://www.codecademy.com/courses/react-102/projects/video-player

…and I’m unable to select different videos, but for the life of me, I don’t no why…can anyone see what I’m doing wrong?

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>
    );
  }
}
import React from 'react';

export class Video extends React.Component {
  render() {
    return (
      <div>
        <video controls autostart autoPlay muted src={this.props.src}/>
      </div>
    );
  }
}
import React from 'react';
import ReactDOM from 'react-dom';
import { Video } from './Video';
import { Menu } from './Menu';

const VIDEOS = {
  fast: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4',
  slow: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4',
  cute: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4',
  eek: 'https://s3.amazonaws.com/codecademy-content/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')
);

I had similar problem but I made mine to work. Here is my code:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Video } from ‘./Video’;
import { Menu } from ‘./Menu’;

const VIDEOS = {
fast: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4’,
slow: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4’,
cute: ‘https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4’,
eek: ‘https://s3.amazonaws.com/codecademy-content/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: VIDEOS[newVideo]
});
}

render() {
return (


Video Player





);
}
}

ReactDOM.render(
,
document.getElementById(‘app’)
);

import React from ‘react’;

export class Video extends React.Component {
render() {
return (




);
}
}

import React from ‘react’;

export class Menu extends React.Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick(e){
var text = e.target.value;
this.props.chooseVideo(text)
}
render() {
return (

fast
slow
cute
eek

);
}
}