Video Pleayer React.js project

Hi all,

I am working on the Video Player project from the React.js lesson: https://www.codecademy.com/courses/react-102/projects/video-player

For some reason I am unable to detect, selecting different options in the Menu doesn’t appear to affect at all to the content of the video itself.

Could someone see what am I doing wrong?

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.slow };
    this.chooseVideo = this.chooseVideo.bind(this);
  }

  chooseVideo(newVideo){
    this.setStatus({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>
    );
  }
}

Menu.js

import React from 'react';

export class Menu extends React.Component {

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

  handleClick(event){
    const newVideo = event.target.value;
    this.props.chooseVideo(newVideo);
  }

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

Any insights will be very welcome!!

Thank you a lot :slight_smile:

Marina

Hello, double check the following:

Do you mean to use this.setStatus()?

Click for another hint

The Codecademy learning environment doesn’t always pass on syntax errors if it prevents the compilation that happens in the background. In this case, I don’t see any syntax errors in your code, so if you review the browser’s console, you’ll likely see a message saying something like “this.setStatus() can’t be found”.

It should be this.setState()

That was it!!! Don’t ask me why I wrote setStatus…
Thank you a lot!