Learn ReactJS: Part 2 - Video Project - menu select not working

Hi Everybody!

I have completed the Video Player Project:
React Video Player Project

When I choose a new video from the menu nothing changes, I have read the code multiple times but I can’t see where the problem lies, can anyone help?

Many thanks in advance

app.js

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 (
      <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 {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e){
    let 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>
    );
  }
}

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

Look where this.handleClick is.
https://www.w3schools.com/tags/tag_form.asp form does not have a value attribute. So chooseVideo will be having undefined passed into it, so nothing else after that point will work as expected. You need to move the onClick.

Hi! Thanks for having a look at this, after spending some more time on this I found that the handleClick function was working correctly. The issue was a syntax error :expressionless:

In App.js my setState function read:

this.setState = ({ })

Instead of what it should have been

this.setState({ })

What I said will be valid for clicking anywhere in the form element that isn’t the radio button. I.e. whitespace or the text. So you will probably want to change it still.

Good spot, completely missed the assignment.