Video Player project

Hello,

I’ve just completed the Video Player project and would appreciate your help in understanding what am I doing wrong.

Once I add the .handleClick method to Menu.js, the video player stops rendering. Once I remove it, the video player renders, but changing the videos is not possible.

Menu.js

import React from 'react';

export class Menu extends React.Component {
  render() {

      ***constructor(props){***
***      super(props);***
***      this.handleClick = this.handleClick.bind(this);***
***    }***

***    handleClick(e){***
***      let text = e.target.value;***
***       this.props.chooseVideo(text);***
***    }***
   
    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>
    );
  }
}

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: 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')
);

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>
    );
  }
}

Hello, and welcome to the forums!

I’m not sure what all the *** is about, but I’m going to assume you did that to draw attention to the area for us to review and it isn’t part of your code.

Look closely at where your render() function begins in Menu.js. You’re trying to declare your constructor and handleClick methods inside the render() rather than on their own. You have them in the right spots in App.js if you want to compare.

1 Like

Much appreciated. That pretty straightforward lol :sweat_smile: