extracted dropdown as a component

Author: joshua0308

src/app/components/Dropdown.jsx

@@ -1,21 +1,24 @@
-import React, { Component } from 'React'
-import Dropdown from 'react-16-dropdown';
+import React from 'react';
+import Select from 'react-select';
+import PropTypes from 'prop-types';
 
-const options = [{
-  label: 'Prestige 🎩',
-  value: 'prestige',
-}, {
-  label: 'Inception 😴',
-  value: 'inception',
-}];
+const Dropdown = (props) => {
+  const { options, handleChangeSpeed, selectedOption } = props;
+  return (
+    <Select
+      className="react-select-container"
+      classNamePrefix="react-select"
+      value={selectedOption}
+      onChange={handleChangeSpeed}
+      options={options}
+      menuPlacement="top"
+    />
+  );
+};
+Dropdown.propTypes = {
+  selectedOption: PropTypes.shape({ value: PropTypes.number, label: PropTypes.string }).isRequired,
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  handleChangeSpeed: PropTypes.func.isRequired,
+};
 
-<Dropdown
-  align='left'
-  className='custom-classname'
-  closeOnEscape={true}
-  options={options}
-  triggerLabel='Movies'
-  onClick={val => console.log(val)}
-/>
-
-export default Dropdown;
+export default Dropdown;

src/app/containers/TravelContainer.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
 import MainSlider from '../components/MainSlider';
+import Dropdown from '../components/Dropdown';
 
 const options = [
-  { value: '2000', label: '0.5x' },
-  { value: '1000', label: '1.0x' },
-  { value: '500', label: '2.0x' },
+  { value: 2000, label: '0.5x' },
+  { value: 1000, label: '1.0x' },
+  { value: 500, label: '2.0x' },
 ];
 
 class TravelContainer extends Component {
@@ -17,7 +17,7 @@ class TravelContainer extends Component {
   }
 
   handleChangeSpeed(selectedOption) {
-    const playSpeed = parseInt(selectedOption.value, 10);
+    const playSpeed = selectedOption.value;
     this.setState({ selectedOption, playSpeed });
   }
 
@@ -53,13 +53,10 @@ class TravelContainer extends Component {
         <div className="forward-button" role="button" onClick={moveForward}>
           {'>'}
         </div>
-        <Select
-          className="react-select-container"
-          classNamePrefix="react-select"
-          value={selectedOption}
-          onChange={this.handleChangeSpeed}
+        <Dropdown
           options={options}
-          menuPlacement="top"
+          selectedOption={selectedOption}
+          handleChangeSpeed={this.handleChangeSpeed}
         />
       </div>
     );