codecademydev/App.js Secret

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

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./styles.css">
	<title>Video Player</title>
</head>
<body>
	<div id="app"></div>
	<script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
	<script src="/App.compiled.js"></script>
</body>
</html>

## Menu.js
import React from 'react';

export class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {
    const 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>
    );
  }
}
	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.fast
	};
	this.chooseVideo = this.chooseVideo.bind(this)
	}
	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')
	);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./styles.css">
	<title>Video Player</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://content.codecademy.com/courses/React/react-course-bundle.min.js"></script>
	<script src="/App.compiled.js"></script>
	</body>
	</html>
	import React from 'react';

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