App.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Menu } from './Menu';
import { Video } from './Video';

const VIDEOS = {
  fast: require('./videos/bel.mp4'),
  slow: require('./videos/mimi.mp4'),
  cute: require('./videos/coco.mp4'),
  eek: require('./videos/drea.mp4') 
};

export class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      src: VIDEOS.fast
    };
  }

  render() {
    return(
      <div>
        <Menu  />
        <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 autoPlay muted src={this.props.src}/>
            </div>
        );
    }
}

Menu.js

import React from 'react';

export class Menu extends React.Component {
    render(){
        return(
            <form>
                <input type="radio" name="src" value="fast"  /> Bella
                <input type="radio" name="src" value="slow"  /> Coco
                <input type="radio" name="src" value="cute"  /> Mimi
                <input type="radio" name="src" value="eek"  /> Drea
            </form>
        );
    }
}

Trying to create a small React app to practice on my personal computer but the video isn't playing, not sure what I am missing. Video player shows and radio buttons are visible but video doesn't play. I know there is more that needs to be done but first I want to have the first video play that is why I set this.state to VIDEOS.fast