function component State Container and props validation

Author: rydang

src/app/containers/MainContainer.jsx

@@ -95,7 +95,8 @@ class MainContainer extends Component {
     port.postMessage({ action: 'emptySnap' });
   }
 
-  // change the snapshot index, this will change the state shown in the state container but won't change the DOM
+  // change the snapshot index
+  // this will change the state shown in the state container but won't change the DOM
   handleChangeSnapshot(snapshotIndex) {
     // snapshotIndex
     // --> 1. affects the action that is highlighted

src/app/containers/StateContainer.jsx

@@ -1,34 +1,36 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { MemoryRouter as Router, Route, NavLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import Tree from '../components/Tree';
 import Chart from '../components/Chart';
 
-class StateContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
+const StateContainer = ({ snapshot }) => (
+  <Router>
+    <div className="state-container">
+      <div className="navbar">
+        <NavLink className="router-link" activeClassName="is-active" to="/tree">
+          Tree
+        </NavLink>
+        <NavLink className="router-link" activeClassName="is-active" to="/chart">
+          Chart
+        </NavLink>
+      </div>
+      <Route path="/tree" render={() => <Tree snapshot={snapshot} />} />
+      <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+    </div>
+  </Router>
+);
 
-  render() {
-    const { snapshot } = this.props;
-    return (
-      <Router>
-        <div className="state-container">
-          <div className="navbar">
-            <NavLink className="router-link" activeClassName="is-active" to="/tree">
-              Tree
-            </NavLink>
-            <NavLink className="router-link" activeClassName="is-active" to="/chart">
-              Chart
-            </NavLink>
-          </div>
-          <Route path="/tree" render={() => <Tree snapshot={snapshot} />} />
-          <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
-        </div>
-      </Router>
-    );
-  }
-}
-{
-}
+StateContainer.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
+    children: PropTypes.arrayOf(
+      PropTypes.object,
+    ),
+  }).isRequired,
+};
 
 export default StateContainer;