Added utity folder to hold components. Restructed toggle.

src/__test__/Toggle.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Toggle from '../components/Toggle';
-import FadeInOut from '../components/Animation/FadeInOut'
+import FadeInOut from '../components/Utils/FadeInOut'
 import { mount, shallow } from 'enzyme';
 
 describe('Toggle', () => {

src/components/Form/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import Form from './Form';
+import SharedTile from '../Utils/SharedTitle';
 
 const FormDemo = () => {
   return (
     <div>
-      <h2>Comments</h2>
+      <SharedTile/>
       <p>
         This form is constructed purely in React without any external library.
         The placeholders and validation are implemented in pure Javascript, thus

src/components/Toggle/Toggle.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Motion, spring } from 'react-motion';
+import FadeInOut from '../Utils/FadeInOut'
+
+
+export default class Toggle extends React.Component {
+  state = {
+    open: false,
+  };
+
+  handleClick = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const animatedContent = this.state.open ? [{key: 'FadeInOut',data:'FadeInOut', opacity: spring(1)}] : null
+    return (
+      <div>
+        <button onClick={this.handleClick}>
+          Toggle
+        </button>
+        <h3>Status: {this.state.open ? 'open' : 'closed'}</h3>
+        <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
+          {({ x }) =>
+            <div className="toggle-bg">
+              <div
+                className="toggle-block"
+                onClick={this.handleClick}
+                style={{
+                  transform: `translate3d(${x}px, 0, 0)`,
+                }}
+              />
+            </div>}
+        </Motion>
+        <FadeInOut content={animatedContent}/>
+      </div>
+    );
+  }
+}

src/components/Toggle/index.js

@@ -1,44 +1,19 @@
-import React from 'react';
-import { Motion, spring } from 'react-motion';
-import FadeInOut from '../Animation/FadeInOut'
+import React from 'react'
+import Toggle from './Toggle'
+import SharedTitle from '../Utils/SharedTitle'
 
-import './style.css';
+import './style.css'
 
-export default class Toggle extends React.Component {
-  state = {
-    open: false,
-  };
-
-  handleClick = () => {
-    this.setState({ open: !this.state.open });
-  };
-
-  render() {
-    const animatedContent = this.state.open ? [{key: 'FadeInOut',data:'FadeInOut', opacity: spring(1)}] : null
-    return (
-      <div>
-        <p>
+const ToggleDemo = () => (
+  <div>
+    <SharedTitle/>
+     <p>
           Try the toggle which controls the status and animation. The block
-          itself is also clickable.
-        </p>
-        <button onClick={this.handleClick}>
-          Toggle
-        </button>
-        <h3>Status: {this.state.open ? 'open' : 'closed'}</h3>
-        <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
-          {({ x }) =>
-            <div className="toggle-bg">
-              <div
-                className="toggle-block"
-                onClick={this.handleClick}
-                style={{
-                  transform: `translate3d(${x}px, 0, 0)`,
-                }}
-              />
-            </div>}
-        </Motion>
-        <FadeInOut content={animatedContent}/>
-      </div>
-    );
-  }
-}
+          itself is also clickable. The animation is created using React-Motion.
+     </p>
+         <hr />
+     <Toggle/>
+  </div>
+)
+
+export default ToggleDemo

src/components/Utils/SharedTitle.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const SharedTile = () => <h2>Comments</h2>
+
+export default SharedTile

src/routes.js

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import App from './components/App';
 import Nav from './components/Nav';
-import Toggle from './components/Toggle';
+import ToggleDemo from './components/Toggle';
 import Home from './components/Home';
 import TabView from './components/Tabs';
 import Modal from './components/Modal';
@@ -21,7 +21,7 @@ const Routes = props =>
       <main className="components">
         <Switch>
           <Route path="/" exact component={Home} />
-          <Route path="/toggle" component={Toggle} />
+          <Route path="/toggle" component={ToggleDemo} />
           <Route path="/tabs" component={TabView} />
           <Route path="/counter" component={Counter} />
           <Route path="/modal" component={Modal} />