converted travel container into functional component with hooks

Author: rydang

src/app/components/Dropdown.jsx

@@ -3,22 +3,22 @@ import Select from 'react-select';
 import PropTypes from 'prop-types';
 
 const Dropdown = (props) => {
-  const { options, handleChangeSpeed, selectedOption } = props;
+  const { speeds, setSpeed, selectedSpeed } = props;
   return (
     <Select
       className="react-select-container"
       classNamePrefix="react-select"
-      value={selectedOption}
-      onChange={handleChangeSpeed}
-      options={options}
+      value={selectedSpeed}
+      onChange={setSpeed}
+      options={speeds}
       menuPlacement="top"
     />
   );
 };
 Dropdown.propTypes = {
-  selectedOption: PropTypes.shape({ value: PropTypes.number, label: PropTypes.string }).isRequired,
-  options: PropTypes.arrayOf(PropTypes.object).isRequired,
-  handleChangeSpeed: PropTypes.func.isRequired,
+  selectedSpeed: PropTypes.shape({ value: PropTypes.number, label: PropTypes.string }).isRequired,
+  speeds: PropTypes.arrayOf(PropTypes.object).isRequired,
+  setSpeed: PropTypes.func.isRequired,
 };
 
 export default Dropdown;

src/app/containers/TravelContainer.jsx

@@ -1,65 +1,55 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MainSlider from '../components/MainSlider';
 import Dropdown from '../components/Dropdown';
 
-const options = [
+const speeds = [
   { value: 2000, label: '0.5x' },
   { value: 1000, label: '1.0x' },
   { value: 500, label: '2.0x' },
 ];
 
-class TravelContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { selectedOption: options[1] };
-    this.handleChangeSpeed = this.handleChangeSpeed.bind(this);
-  }
+const TravelContainer = (props) => {
+  const [selectedSpeed, setSpeed] = useState(speeds[1]);
 
-  handleChangeSpeed(selectedOption) {
-    this.setState({ selectedOption });
-  }
+  const {
+    moveBackward,
+    moveForward,
+    snapshotsLength,
+    handleJumpSnapshot,
+    sliderIndex,
+    play,
+    playing,
+    pause,
+  } = props;
 
-  render() {
-    const { selectedOption } = this.state;
-    const {
-      moveBackward,
-      moveForward,
-      snapshotsLength,
-      handleJumpSnapshot,
-      sliderIndex,
-      play,
-      playing,
-      pause,
-    } = this.props;
-
-    return (
-      <div className="travel-container">
-        <button className="play-button" type="button" onClick={() => play(selectedOption.value)}>
-          {playing ? 'Pause' : 'Play'}
-        </button>
-        <MainSlider
-          snapshotLength={snapshotsLength}
-          sliderIndex={sliderIndex}
-          handleJumpSnapshot={handleJumpSnapshot}
-          pause={pause}
-        />
-        <button className="backward-button" onClick={moveBackward} type="button">
-          {'<'}
-        </button>
-        <button className="forward-button" onClick={moveForward} type="button">
-          {'>'}
-        </button>
-        <Dropdown
-          options={options}
-          selectedOption={selectedOption}
-          handleChangeSpeed={this.handleChangeSpeed}
-        />
-      </div>
-    );
-  }
+  return (
+    <div className="travel-container">
+      <button className="play-button" type="button" onClick={() => play(selectedSpeed.value)}>
+        {playing ? 'Pause' : 'Play'}
+      </button>
+      <MainSlider
+        snapshotLength={snapshotsLength}
+        sliderIndex={sliderIndex}
+        handleJumpSnapshot={handleJumpSnapshot}
+        pause={pause}
+      />
+      <button className="backward-button" onClick={moveBackward} type="button">
+        {'<'}
+      </button>
+      <button className="forward-button" onClick={moveForward} type="button">
+        {'>'}
+      </button>
+      <Dropdown
+        speeds={speeds}
+        selectedSpeed={selectedSpeed}
+        setSpeed={setSpeed}
+      />
+    </div>
+  );
 }
 
+
 TravelContainer.propTypes = {
   pause: PropTypes.func.isRequired,
   play: PropTypes.func.isRequired,