REACT, PART II Video Player - Stops rendering when the bind statement is added

Get Help
,
#1

Hi,

I’m going through this following project: Video Player

At step 5 when I add the bind statement the whole app stops rendering, and then at the end after step 9 again it stops rendering.!

As soon as I delete the bind statement I comes back. Hopefully someone can see what’s causing this.

[https://www.codecademy.com/workspaces/6322e71b3a5e6d3f6fa24a65]
My project

App.js

import React from 'react';

export class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick= this.handleClick.bind(this);
  }
  chooseVideo(newVideo) {
  this.setState({
    src: VIDEOS[newVideo]
  });
}
handleClick(e) {
  var 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>
    );
  }
}
ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

Video.js

import React from 'react';

export class Video extends React.Component {
  render() {
    return (
      <div>
        <video src={this.props.src}controls autostart autoPlay muted />
      </div>
    );
  }
}

Menu.js

import React from 'react';

export class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick= this.handleClick.bind(this);
  }
  chooseVideo(newVideo) {
  this.setState({
    src: VIDEOS[newVideo]
  });
}
handleClick(e) {
  var 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>
    );
  }
}
#2

Awaiting help here. Can anyone look into it and guide me?
TIA

#3

I think your problem is in Menu.js. Try removing the following function:

chooseVideo(newVideo) {
  this.setState({
    src: VIDEOS[newVideo]
  });```
#4

Hey @johnLohavichan296750 removing the function removes all the content from the browser. This didnt work. :frowning:

#5

Can you repost your menu.js, app.js and video.js? I also noticed your app.js and menu.js are exactly the same code - is that right or was it just not pasted correctly?

#6

Oh my bad, re-sharing both again below.

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 };
  }
  
  render() {
    return (
      <div>
        <h1>Video Player</h1>
  <Menu chooseVideo={this.chooseVideo} />
        <Video src={this.state.src}/>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

Menu.js

import React from 'react';

export class Menu extends React.Component {
  chooseVideo(newVideo) {
  this.setState({
    src: VIDEOS[newVideo]
  });
}
  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>
    );
  }
}

Video.js

import React from 'react';

export class Video extends React.Component {
  render() {
    return (
      <div>
        <video src={this.props.src}controls autostart autoPlay muted />
      </div>
    );
  }
}
#7

Ah ok.

I would start by re-examining the steps of the exercise.

In step 3 - it says to create a new property in App.js named chooseVideo. I didn’t see this in your App.js. But I did see it in your Menu.js so I would take a look at that to start.