From 3c39dcca1080a66ab96bc1d2b17909934e824c28 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Fri, 21 Jul 2017 00:32:14 -0500
Subject: [PATCH 01/28] got the grudgy sorted...I think

---
 package.json                  |  8 ++++----
 src/App.js                    |  2 ++
 src/components/ListOfUsers.js | 10 ++++++++++
 src/components/UserDetail.js  |  0
 src/index.js                  |  4 +++-
 yarn.lock                     | 13 ++-----------
 6 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ListOfUsers.js
 create mode 100644 src/components/UserDetail.js

diff --git a/package.json b/package.json
index a449367b..d2fceedf 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-eslint": "^7.1.1",
-    "eslint": "^3.14.0",
+    "babel-eslint": "7.0",
+    "eslint": "3.8.1",
     "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-react": "^6.9.0",
+    "eslint-plugin-react": "6.4.1",
     "react-scripts": "0.7.0"
   },
   "dependencies": {
@@ -24,5 +24,5 @@
     "test": "npm run lint && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy" : "http://localhost:3001"
+  "proxy": "http://localhost:3001"
 }
diff --git a/src/App.js b/src/App.js
index 0042c777..0de5eccc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import ListOfUsers from './components/ListOfUsers';
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
+      <ListOfUsers users={props.users} />
     </div>
   );
 }
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
new file mode 100644
index 00000000..d38f77ae
--- /dev/null
+++ b/src/components/ListOfUsers.js
@@ -0,0 +1,10 @@
+import React from 'react';
+// import users from '../users';
+
+export default function ListOfUsers(props){
+    const userDivs = props.users.map((user) => {
+      return <div>{user.first_name}</div>
+    })
+    return userDivs;
+
+}
\ No newline at end of file
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/index.js b/src/index.js
index 8e6bfe35..7b98feb7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,5 @@
+
+
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
@@ -7,7 +9,7 @@ import users from "./users";
 
 function render() {
   ReactDOM.render(
-    <App />,
+    <App users={users} />,
     document.getElementById("root")
   );
 }
diff --git a/yarn.lock b/yarn.lock
index 137072ec..361a32da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -351,7 +351,7 @@ babel-core@^6.11.4, babel-core@^6.24.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-eslint@7.0.0:
+babel-eslint@7.0, babel-eslint@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.0.0.tgz#54e51b4033f54ac81326ecea4c646a779935196d"
   dependencies:
@@ -360,15 +360,6 @@ babel-eslint@7.0.0:
     babylon "^6.11.2"
     lodash.pickby "^4.6.0"
 
-babel-eslint@^7.1.1:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.2.tgz#0da2cbe6554fd0fb069f19674f2db2f9c59270ff"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-traverse "^6.23.1"
-    babel-types "^6.23.0"
-    babylon "^6.16.1"
-
 babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0:
   version "6.24.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56"
@@ -1272,7 +1263,7 @@ babel-types@^6.19.0, babel-types@^6.24.1:
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.11.2, babylon@^6.13.0, babylon@^6.15.0, babylon@^6.16.1:
+babylon@^6.11.0, babylon@^6.11.2, babylon@^6.13.0, babylon@^6.15.0:
   version "6.16.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
 

From c7a1d818d64121190dd29d29da2e15614bae8c9c Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Fri, 21 Jul 2017 02:01:50 -0500
Subject: [PATCH 02/28] List works!

---
 src/App.js                    | 4 ++--
 src/components/ListOfUsers.js | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0de5eccc..f24a84b0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,7 +3,7 @@ import logo from "./logo.svg";
 import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 
-function App() {
+function App(props) {
   return (
     <div className="App">
       <div className="App-header">
@@ -13,7 +13,7 @@ function App() {
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
-      <ListOfUsers users={props.users} />
+       <ListOfUsers users={props.users} /> 
     </div>
   );
 }
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index d38f77ae..05cdad22 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -2,9 +2,10 @@ import React from 'react';
 // import users from '../users';
 
 export default function ListOfUsers(props){
-    const userDivs = props.users.map((user) => {
-      return <div>{user.first_name}</div>
-    })
-    return userDivs;
+    // const userDivs = props.users.map((user) => {
+    //   return <div>{user.first_name}</div>
+    // })
+    let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
+    return <div>{userAr}</div>;
 
 }
\ No newline at end of file

From 172fac4aada8e91756270d39a0a995b6114174dc Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Fri, 21 Jul 2017 02:28:54 -0500
Subject: [PATCH 03/28] getting there...nother map

---
 src/App.js                   |  3 ++-
 src/components/UserDetail.js | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index f24a84b0..97bc3293 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
-
+import UserDetail from './components/UserDetail';
 function App(props) {
   return (
     <div className="App">
@@ -14,6 +14,7 @@ function App(props) {
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
        <ListOfUsers users={props.users} /> 
+       <UserDetail user={props.users[1]} />
     </div>
   );
 }
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index e69de29b..12e758e8 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function UserDetail(props){
+  let person = props.users;
+  return 
+    <div>
+      <h3>{props.users.first_name} {props.users.last_name}</h3>
+      {/* <p>{person.address}</p>
+      <p>{person.phone}</p>
+      <p>{person.occupation}</p>
+      <img src={person.avatar} /> */}
+    </div>
+
+} 
\ No newline at end of file

From f46be341c3ac4e29e1fb640866f50c110414d81c Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sat, 22 Jul 2017 01:14:13 -0500
Subject: [PATCH 04/28] rendering userDetails

---
 src/App.js                   | 2 +-
 src/components/UserDetail.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 97bc3293..58681dce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ function App(props) {
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
        <ListOfUsers users={props.users} /> 
-       <UserDetail user={props.users[1]} />
+       <UserDetail user={props.users[0]} />
     </div>
   );
 }
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 12e758e8..461547a5 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
 export default function UserDetail(props){
-  let person = props.users;
-  return 
+ 
+   return 
     <div>
       <h3>{props.users.first_name} {props.users.last_name}</h3>
       {/* <p>{person.address}</p>

From 22280b8054a8e4a3f4af3e0d55342480adf37c39 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sat, 22 Jul 2017 03:01:08 -0500
Subject: [PATCH 05/28] moving right along

---
 src/components/Button.js      | 27 +++++++++++++++++++++++++++
 src/components/ListOfUsers.js | 19 +++++++++++++++++--
 src/components/UserDetail.js  | 12 +++---------
 3 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Button.js

diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 00000000..9bfab821
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,27 @@
+import React from 'react';
+export default class Button extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {showing: true};
+
+    // This binding is necessary to make `this` work in the callback
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(prevState => ({
+      showing: !prevState.showing
+    }));
+  }
+
+  render() {
+    // let buttonVal =
+    //   this.state.showing ? 'Hide' : 'Show';
+    return (
+      <button onClick={this.handleClick}>
+        {this.state.showing ? 'Hide' : 'Show'}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 05cdad22..9ff049fd 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -1,11 +1,26 @@
 import React from 'react';
+import Button from './Button.js';
 // import users from '../users';
 
 export default function ListOfUsers(props){
     // const userDivs = props.users.map((user) => {
     //   return <div>{user.first_name}</div>
     // })
+    let showing = true;
     let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-    return <div>{userAr}</div>;
+    
+    function handleClick() {
+          showing = !showing;
+      }
+   
 
-}
\ No newline at end of file
+    return  
+    <div>
+
+        {/* <button onClick={handleClick}>
+            {showing ? 'Hide' : 'Show'}
+        </button> */}
+        {userAr}
+            {/* <div style='display ={showing};'>{userAr}</div> */}
+    </div>
+    }
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 12e758e8..07552f2c 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -1,14 +1,8 @@
 import React from 'react';
 
 export default function UserDetail(props){
-  let person = props.users;
-  return 
-    <div>
-      <h3>{props.users.first_name} {props.users.last_name}</h3>
-      {/* <p>{person.address}</p>
-      <p>{person.phone}</p>
-      <p>{person.occupation}</p>
-      <img src={person.avatar} /> */}
-    </div>
+  return (
+    <div>{props.user.first_name}</div>
+  );
 
 } 
\ No newline at end of file

From b9b58b19c7c8250768371be764a1a3a24c23ee52 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sat, 22 Jul 2017 11:34:38 -0500
Subject: [PATCH 06/28] button time

---
 src/App.js                    |  4 ++--
 src/components/ListOfUsers.js | 25 +++++++++++--------------
 src/index.css                 |  4 ++++
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index 97bc3293..886b6ccd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
-import UserDetail from './components/UserDetail';
+// import UserDetail from './components/UserDetail';
 function App(props) {
   return (
     <div className="App">
@@ -14,7 +14,7 @@ function App(props) {
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
        <ListOfUsers users={props.users} /> 
-       <UserDetail user={props.users[1]} />
+       {/* <UserDetail user={props.users[1]} /> */}
     </div>
   );
 }
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 9ff049fd..3b7c25d9 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -1,26 +1,23 @@
 import React from 'react';
-import Button from './Button.js';
+// import Button from './Button.js';
 // import users from '../users';
 
 export default function ListOfUsers(props){
     // const userDivs = props.users.map((user) => {
     //   return <div>{user.first_name}</div>
     // })
-    let showing = true;
+    
     let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
     
-    function handleClick() {
-          showing = !showing;
-      }
+    // function handleClick() {
+    //       showing = !showing;
+    //   }
    
 
-    return  
-    <div>
-
-        {/* <button onClick={handleClick}>
-            {showing ? 'Hide' : 'Show'}
-        </button> */}
-        {userAr}
-            {/* <div style='display ={showing};'>{userAr}</div> */}
-    </div>
+    return  <div>
+        {userAr};
+        </div>
     }
+
+        
+    
diff --git a/src/index.css b/src/index.css
index b4cc7250..bdda4207 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,3 +3,7 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+#list{
+  display:block;
+  
+}
\ No newline at end of file

From 9c50364a07ebefc7efa36cf913ca901da562990d Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sat, 22 Jul 2017 11:49:07 -0500
Subject: [PATCH 07/28] onclick function?

---
 src/components/ListOfUsers.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 3b7c25d9..9150ff93 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -8,14 +8,22 @@ export default function ListOfUsers(props){
     // })
     
     let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-    
-    // function handleClick() {
-    //       showing = !showing;
-    //   }
+    let show = 'Show';
+    function hideShow() {
+        var x = document.getElementById('list');
+        if (x.style.display === 'none') {
+            x.style.display = 'block';
+        } else {
+            x.style.display = 'none';
+        }
+      }
    
 
     return  <div>
-        {userAr};
+            <div> <button onClick="hideShow()">{show}</button></div>
+        <div id='list'>
+            {userAr};
+        </div>
         </div>
     }
 

From e6eba73ee4ad4f4530fe6298ff31b4d42073ee37 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sat, 22 Jul 2017 12:57:02 -0500
Subject: [PATCH 08/28] function button

---
 src/components/ListOfUsers.js | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 9150ff93..7389ee58 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -8,24 +8,35 @@ export default function ListOfUsers(props){
     // })
     
     let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-    let show = 'Show';
+    var btn = document.getElementById('hideShow');
     function hideShow() {
         var x = document.getElementById('list');
+       
         if (x.style.display === 'none') {
+            btn.innerHTML = 'Hide'
             x.style.display = 'block';
-        } else {
+            
+           } else {
             x.style.display = 'none';
+             btn.innerHTML = 'Show'; 
+
         }
       }
-   
 
-    return  <div>
-            <div> <button onClick="hideShow()">{show}</button></div>
-        <div id='list'>
-            {userAr};
-        </div>
-        </div>
-    }
 
-        
-    
+    // function buttonFcn(){
+    //     this.value === 'Show'
+    // }
+    return
+            <div>
+      
+                <div> 
+                    <button id='hideShow' onClick={hideShow}>Hide</button>
+                
+                    <div id='list'>
+                        {userAr}
+                    </div>
+                </div>
+            </div>
+      
+}
\ No newline at end of file

From a06024b76676a7bfaec08e9e7244b0b3d675e951 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sat, 22 Jul 2017 13:14:12 -0500
Subject: [PATCH 09/28] need to separate fcn?

---
 src/components/ListOfUsers.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 7389ee58..9edb5c7d 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -8,10 +8,11 @@ export default function ListOfUsers(props){
     // })
     
     let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-    var btn = document.getElementById('hideShow');
+   
     function hideShow() {
         var x = document.getElementById('list');
-       
+        var btn = document.getElementById('hideShow');
+
         if (x.style.display === 'none') {
             btn.innerHTML = 'Hide'
             x.style.display = 'block';

From f450fedb442fc6e1f2c1d94f2cd6a32d8d7ffad2 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sat, 22 Jul 2017 22:35:26 -0500
Subject: [PATCH 10/28] hide/show functional

---
 src/components/ListOfUsers.js | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 9edb5c7d..82e1426b 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -11,7 +11,7 @@ export default function ListOfUsers(props){
    
     function hideShow() {
         var x = document.getElementById('list');
-        var btn = document.getElementById('hideShow');
+        var btn = document.getElementById('display');
 
         if (x.style.display === 'none') {
             btn.innerHTML = 'Hide'
@@ -23,21 +23,11 @@ export default function ListOfUsers(props){
 
         }
       }
+   
+    return (<div>
+                <button id='display' onClick={hideShow}>show</button>
+                <div id='list'>{userAr}</div>
+            </div>)
 
 
-    // function buttonFcn(){
-    //     this.value === 'Show'
-    // }
-    return
-            <div>
-      
-                <div> 
-                    <button id='hideShow' onClick={hideShow}>Hide</button>
-                
-                    <div id='list'>
-                        {userAr}
-                    </div>
-                </div>
-            </div>
-      
 }
\ No newline at end of file

From 89070893f778cc433bf354be075a192c2aa3ba74 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 02:56:36 -0500
Subject: [PATCH 11/28] functional  class hide/show

---
 src/App.js                    |  6 ++-
 src/components/ListOfUsers.js | 69 +++++++++++++++++++++++------------
 src/components/UserDetail.js  | 20 +++++-----
 3 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/App.js b/src/App.js
index 886b6ccd..90d2271c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,8 @@ import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
-// import UserDetail from './components/UserDetail';
+import UserDetail from './components/UserDetail';
+
 function App(props) {
   return (
     <div className="App">
@@ -14,7 +15,8 @@ function App(props) {
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
        <ListOfUsers users={props.users} /> 
-       {/* <UserDetail user={props.users[1]} /> */}
+       console.log(props)
+         <UserDetail user={props.users[1]} />
     </div>
   );
 }
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 82e1426b..d9966c7a 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -1,33 +1,54 @@
 import React from 'react';
-// import Button from './Button.js';
+import Button from './Button.js';
 // import users from '../users';
 
-export default function ListOfUsers(props){
-    // const userDivs = props.users.map((user) => {
-    //   return <div>{user.first_name}</div>
-    // })
+export default class ListOfUsers extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            visible: true
+        }
+    
+     this.onClick = this.onClick.bind(this); 
+    }
     
-    let userAr = props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-   
-    function hideShow() {
-        var x = document.getElementById('list');
-        var btn = document.getElementById('display');
+    onClick()  {
+			if(document.getElementById('list').style.display === (""||'none')){
+				document.getElementById('list').style.display = 'block';
+			}else{
+				document.getElementById('list').style.display = 'none';
+			}
+        this.setState({
+            visible: this.state.visible ? false : true
+				})
+			
+    }
+    // var btn = document.getElementById('display');
 
-        if (x.style.display === 'none') {
-            btn.innerHTML = 'Hide'
-            x.style.display = 'block';
-            
-           } else {
-            x.style.display = 'none';
-             btn.innerHTML = 'Show'; 
+    //     if (x.style.display === 'none') {
+    //         btn.innerHTML = 'Hide'
+    //         x.style.display = 'block';
+    //         console.log(props);
+    //        } else {
+    //         x.style.display = 'none';
+    //          btn.innerHTML = 'Show'; 
 
-        }
-      }
-   
-    return (<div>
-                <button id='display' onClick={hideShow}>show</button>
-                <div id='list'>{userAr}</div>
-            </div>)
+    //     }
+    //   }
+    // }
+    render(){
+        let  show = this.state.visible ? 'Hide' : 'Show';
+        let disp = this.state.visible ? 'block' : 'none';
+        let userAr = this.props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
+			
+				
+        return(
+          <div>
+            <button id='display' onClick={this.onClick}>{show}</button> 
+            <div id='list'>{userAr}</div>
+				</div>
+				);
 
 
+    }
 }
\ No newline at end of file
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 0d348824..7f2abc00 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -1,14 +1,16 @@
 import React from 'react';
 
 export default function UserDetail(props){
- 
-   return 
-    <div>
-      <h3>{props.user.first_name} {props.user.last_name}</h3>
-      {/* <p>{person.address}</p>
-      <p>{person.phone}</p>
-      <p>{person.occupation}</p>
-      <img src={person.avatar} /> */}
-    </div>
+ let person = Object.keys(props.user);
+  //  console.log(Object.keys(props.user));
+   
+  return (  
+    <div> 
+        <div>{props.user.address}</div>)
+    </div>)
+        
+        
+          
+  
 
 } 
\ No newline at end of file

From 29ff936ed8568013cb732c369a698b9528af11a6 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 03:21:28 -0500
Subject: [PATCH 12/28] almost there,  sort out input and on Change

---
 src/components/ListOfUsers.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index d9966c7a..cc15270c 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -1,15 +1,17 @@
 import React from 'react';
-import Button from './Button.js';
+// import Button from './Button.js';
 // import users from '../users';
 
 export default class ListOfUsers extends React.Component {
     constructor(props){
         super(props);
         this.state = {
-            visible: true
+						visible: true,
+						searchText: ''
         }
     
-     this.onClick = this.onClick.bind(this); 
+		 this.onClick = this.onClick.bind(this); 
+		//  this.onChange = this.onChange.bind(this);
     }
     
     onClick()  {
@@ -22,7 +24,16 @@ export default class ListOfUsers extends React.Component {
             visible: this.state.visible ? false : true
 				})
 			
-    }
+			}
+		
+		// onChange(e) {
+		// 	this.setState({
+		// 		searchText: e.target.value
+
+		// 	})
+
+		
+	
     // var btn = document.getElementById('display');
 
     //     if (x.style.display === 'none') {
@@ -37,13 +48,13 @@ export default class ListOfUsers extends React.Component {
     //   }
     // }
     render(){
-        let  show = this.state.visible ? 'Hide' : 'Show';
-        let disp = this.state.visible ? 'block' : 'none';
+        
         let userAr = this.props.users.map((x,i) => <div key={i}>{x.first_name}</div>);
-			
+			 let show = this.state.visible ? 'Hide' : 'Show';
 				
         return(
           <div>
+						<input label='search'>Search></input>
             <button id='display' onClick={this.onClick}>{show}</button> 
             <div id='list'>{userAr}</div>
 				</div>

From bf4db3977f2f4c9e062c891bf387f2fd183da3ca Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 13:16:34 -0500
Subject: [PATCH 13/28] Search box => onto OnChange

---
 src/components/ListOfUsers.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index cc15270c..3ab60e02 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -54,7 +54,8 @@ export default class ListOfUsers extends React.Component {
 				
         return(
           <div>
-						<input label='search'>Search></input>
+						<input type='text' label='search' defaultValue='Search'></input>
+						<br />
             <button id='display' onClick={this.onClick}>{show}</button> 
             <div id='list'>{userAr}</div>
 				</div>

From 913937fb9e9beaf716c901e344c7a033692e1bba Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 23 Jul 2017 14:16:00 -0500
Subject: [PATCH 14/28] search text value bound

---
 src/components/ListOfUsers.js | 32 +++++++++++++++-----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 3ab60e02..37d72a57 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -6,12 +6,12 @@ export default class ListOfUsers extends React.Component {
     constructor(props){
         super(props);
         this.state = {
-						visible: true,
-						searchText: ''
+		    visible: true,
+			searchText: ''
         }
     
 		 this.onClick = this.onClick.bind(this); 
-		//  this.onChange = this.onChange.bind(this);
+	     this.handleChange = this.handleChange.bind(this);
     }
     
     onClick()  {
@@ -26,13 +26,11 @@ export default class ListOfUsers extends React.Component {
 			
 			}
 		
-		// onChange(e) {
-		// 	this.setState({
-		// 		searchText: e.target.value
-
-		// 	})
-
-		
+		handleChange(e) {
+			this.setState({
+				searchText: e.target.value
+			})
+        }
 	
     // var btn = document.getElementById('display');
 
@@ -53,13 +51,13 @@ export default class ListOfUsers extends React.Component {
 			 let show = this.state.visible ? 'Hide' : 'Show';
 				
         return(
-          <div>
-						<input type='text' label='search' defaultValue='Search'></input>
-						<br />
-            <button id='display' onClick={this.onClick}>{show}</button> 
-            <div id='list'>{userAr}</div>
-				</div>
-				);
+                <div>
+                    <input type='text' label='search' defaultValue='Search' onChange={(e)=>{this.handleChange(e)}}></input>
+                    <br />
+                    <button id='display' onClick={this.onClick}>{show}</button> 
+                    <div id='list'>{userAr}</div>
+                </div>
+			);
 
 
     }

From 80c221a901c11c4c2fff11cdc810b9c07c38510c Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 15:35:33 -0500
Subject: [PATCH 15/28] sync

---
 src/components/ListOfUsers.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 3ab60e02..ecfd97bf 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -26,12 +26,12 @@ export default class ListOfUsers extends React.Component {
 			
 			}
 		
-		// onChange(e) {
-		// 	this.setState({
-		// 		searchText: e.target.value
-
-		// 	})
+		onChange(e) {
+			this.setState({
+				searchText: e.target.value
 
+			})
+		}
 		
 	
     // var btn = document.getElementById('display');

From 002db27453bd97cbeef310c9e50571a1fc5ce528 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 15:39:25 -0500
Subject: [PATCH 16/28] old

---
 src/components/ListOfUsers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index ecfd97bf..244cdbf9 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -11,7 +11,7 @@ export default class ListOfUsers extends React.Component {
         }
     
 		 this.onClick = this.onClick.bind(this); 
-		//  this.onChange = this.onChange.bind(this);
+		 this.onChange = this.onChange.bind(this);
     }
     
     onClick()  {

From 4888d8292e706189ded1537e51cb4a4f87d671bb Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 23 Jul 2017 20:34:50 -0500
Subject: [PATCH 17/28] rendering hardcoded user functional and mildly styled,
 connecting list links to getUser function, perhaps find...

---
 src/App.js                    |  3 ++-
 src/components/ListOfUsers.js |  2 +-
 src/components/UserDetail.js  | 37 ++++++++++++++++++++++++-----------
 src/index.css                 | 21 ++++++++++++++++++++
 src/index.js                  |  4 ++--
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 90d2271c..18c43f2d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
 
 function App(props) {
+
   return (
     <div className="App">
       <div className="App-header">
@@ -16,7 +17,7 @@ function App(props) {
       </p>
        <ListOfUsers users={props.users} /> 
        console.log(props)
-         <UserDetail user={props.users[1]} />
+         <UserDetail user={props.curUser} />
     </div>
   );
 }
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 79f8473b..a405a199 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -47,7 +47,7 @@ export default class ListOfUsers extends React.Component {
     // }
     render(){
         
-        let userAr = this.props.users.map((x,i) => <div key={i}><a href={this.props.selectUser}{x.first_name}</div>);
+        let userAr = this.props.users.map((x,i) => <div key={i}><a href='#'>{x.first_name}</a></div>);
 			 let show = this.state.visible ? 'Hide' : 'Show';
 				
         return(
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 7f2abc00..44a37ada 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -1,16 +1,31 @@
 import React from 'react';
 
 export default function UserDetail(props){
- let person = Object.keys(props.user);
-  //  console.log(Object.keys(props.user));
-   
-  return (  
-    <div> 
-        <div>{props.user.address}</div>)
-    </div>)
-        
-        
-          
+ 
+    let person = props.user;
+    let personKeys = Object.keys(props.user).slice(1,6);
+    let pic = props.user.avatar;
+   console.log(person);
+   console.log(pic);
+
+  let profile = personKeys.map(key => <div key={key}>{key}: {person[key]}</div>)
+  
+    return (
+    <div className='profile'>
+        <img src={pic} className='thumbnail' alt="log" />
+        {profile}
+    </div>
+);
+  
+  
+
+{//   return 
   
+//   (  
 
-} 
\ No newline at end of file
+//     <div> 
+//         <img className='thumbnail' src={pic} alt='logo' />
+//         <div className='profile'>{list}</div>)
+//   </div>);
+}
+  }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index bdda4207..4a04dbb6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,4 +6,25 @@ body {
 #list{
   display:block;
   
+}
+
+.thumbnail {
+  margin: 5px;
+  height: 8rem;
+  width: 6rem;
+  border: blue 2px;
+  box-shadow: blanchedalmond, 0342, 2349;
+
+}
+
+.profile {
+  margin: 7px;
+  background-color: lightcoral;
+  font-family: 'Times New Roman', Times, serif;
+  color: purple;
+  display: flex;
+  flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 0386723a..3c969844 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import App from "./App";
 import "./index.css";
 import users from "./users";
 
-let currentUser;
+let currentUser = users[0];
 
 function selectUser(user){
   currentUser = user;
@@ -14,7 +14,7 @@ function selectUser(user){
 
 function render() {
   ReactDOM.render(
-    <App users={users} getUser={(user) => selectUser(user)} />,
+    <App users={users} getUser={(user) => selectUser(user)} curUser = {currentUser} />,
     document.getElementById("root")
   );
 }

From 8f23990a4766488ce3904d824f3c4bdfcaf66a08 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Mon, 24 Jul 2017 00:26:35 -0500
Subject: [PATCH 18/28] fire the function on  click

---
 src/App.js                    | 2 +-
 src/components/ListOfUsers.js | 5 ++---
 src/index.js                  | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 18c43f2d..7781c140 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,7 @@ function App(props) {
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
-       <ListOfUsers users={props.users} /> 
+       <ListOfUsers users={props.users} getUser={props.getUser} /> 
        console.log(props)
          <UserDetail user={props.curUser} />
     </div>
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index a405a199..0a1d5df4 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -12,8 +12,7 @@ export default class ListOfUsers extends React.Component {
     
 		 this.onClick = this.onClick.bind(this); 
 	     this.handleChange = this.handleChange.bind(this);
-    }
-    
+   }
     onClick()  {
 			if(document.getElementById('list').style.display === (""||'none')){
 				document.getElementById('list').style.display = 'block';
@@ -47,7 +46,7 @@ export default class ListOfUsers extends React.Component {
     // }
     render(){
         
-        let userAr = this.props.users.map((x,i) => <div key={i}><a href='#'>{x.first_name}</a></div>);
+        let userAr = this.props.users.map((x,i) => <div key={i}><a onClick={props.getUser(x)}>{x.first_name}</a></div>);
 			 let show = this.state.visible ? 'Hide' : 'Show';
 				
         return(
diff --git a/src/index.js b/src/index.js
index 3c969844..346f629f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,13 +8,13 @@ import users from "./users";
 
 let currentUser = users[0];
 
-function selectUser(user){
+function selectUser(user) {
   currentUser = user;
 }
 
 function render() {
   ReactDOM.render(
-    <App users={users} getUser={(user) => selectUser(user)} curUser = {currentUser} />,
+    <App users={users} getUser={selectUser} curUser={currentUser} />,
     document.getElementById("root")
   );
 }

From f73ab9ac81c09f975847b02abfd9c647ea728cc1 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Mon, 24 Jul 2017 01:17:49 -0500
Subject: [PATCH 19/28] So close

---
 src/components/ListOfUsers.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 0a1d5df4..a46d7dea 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -10,8 +10,9 @@ export default class ListOfUsers extends React.Component {
 			searchText: ''
         }
     
-		 this.onClick = this.onClick.bind(this); 
-	     this.handleChange = this.handleChange.bind(this);
+		this.onClick = this.onClick.bind(this); 
+        this.handleChange = this.handleChange.bind(this);
+        this.userClick = this.userClick.bind(this);
    }
     onClick()  {
 			if(document.getElementById('list').style.display === (""||'none')){
@@ -25,12 +26,18 @@ export default class ListOfUsers extends React.Component {
 			
 			}
 		
-		handleChange(e) {
+	handleChange(e) {
 			this.setState({
 				searchText: e.target.value
 			})
         }
-	
+    
+    userClick(e) {
+       console.log(e.target);
+        let user = this.props.users.filter(x => x.first_name === e.target.innerHtml);
+        console.log(user);
+        this.props.getUser(user);
+    }
     // var btn = document.getElementById('display');
 
     //     if (x.style.display === 'none') {
@@ -45,8 +52,8 @@ export default class ListOfUsers extends React.Component {
     //   }
     // }
     render(){
-        
-        let userAr = this.props.users.map((x,i) => <div key={i}><a onClick={props.getUser(x)}>{x.first_name}</a></div>);
+         
+        let userAr = this.props.users.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);
 			 let show = this.state.visible ? 'Hide' : 'Show';
 				
         return(

From a89ddf21f460ac1fb7a6c9f98745238d03d24dee Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Mon, 24 Jul 2017 02:54:17 -0500
Subject: [PATCH 20/28] can't get the current user to update the page

---
 src/components/ListOfUsers.js | 17 +++--------------
 src/components/UserDetail.js  |  9 ++++++---
 src/index.js                  |  3 ++-
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index a46d7dea..02fe2a66 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -34,23 +34,12 @@ export default class ListOfUsers extends React.Component {
     
     userClick(e) {
        console.log(e.target);
-        let user = this.props.users.filter(x => x.first_name === e.target.innerHtml);
+        let user = this.props.users.filter(function(x){ 
+            return x.first_name === e.target.innerHTML;
+        })
         console.log(user);
         this.props.getUser(user);
     }
-    // var btn = document.getElementById('display');
-
-    //     if (x.style.display === 'none') {
-    //         btn.innerHTML = 'Hide'
-    //         x.style.display = 'block';
-    //         console.log(props);
-    //        } else {
-    //         x.style.display = 'none';
-    //          btn.innerHTML = 'Show'; 
-
-    //     }
-    //   }
-    // }
     render(){
          
         let userAr = this.props.users.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 44a37ada..0214067d 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default function UserDetail(props){
- 
+ if(props.user){
     let person = props.user;
     let personKeys = Object.keys(props.user).slice(1,6);
     let pic = props.user.avatar;
@@ -14,8 +14,11 @@ export default function UserDetail(props){
     <div className='profile'>
         <img src={pic} className='thumbnail' alt="log" />
         {profile}
-    </div>
-);
+    </div>);
+}else{
+    return null;
+}
+
   
   
 
diff --git a/src/index.js b/src/index.js
index 346f629f..e92a0f66 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,10 +6,11 @@ import App from "./App";
 import "./index.css";
 import users from "./users";
 
-let currentUser = users[0];
+let currentUser = {};
 
 function selectUser(user) {
   currentUser = user;
+  console.log(currentUser);
 }
 
 function render() {

From 420bf47774edc59c773fd7cf96acf34babab52ae Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Mon, 24 Jul 2017 20:29:06 -0500
Subject: [PATCH 21/28] fahkin werks!

---
 src/components/ListOfUsers.js | 2 +-
 src/components/UserDetail.js  | 8 +++++---
 src/index.js                  | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 02fe2a66..642ab60f 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -37,7 +37,7 @@ export default class ListOfUsers extends React.Component {
         let user = this.props.users.filter(function(x){ 
             return x.first_name === e.target.innerHTML;
         })
-        console.log(user);
+        console.log(user[0]);
         this.props.getUser(user);
     }
     render(){
diff --git a/src/components/UserDetail.js b/src/components/UserDetail.js
index 0214067d..18ed19ea 100644
--- a/src/components/UserDetail.js
+++ b/src/components/UserDetail.js
@@ -3,12 +3,14 @@ import React from 'react';
 export default function UserDetail(props){
  if(props.user){
     let person = props.user;
-    let personKeys = Object.keys(props.user).slice(1,6);
-    let pic = props.user.avatar;
+    console.log(person);
+    let personKeys = Object.keys(person[0]).slice(1,6);
+    console.log(personKeys);
+    let pic = person[0].avatar;
    console.log(person);
    console.log(pic);
 
-  let profile = personKeys.map(key => <div key={key}>{key}: {person[key]}</div>)
+  let profile = personKeys.map(key => <div key={key}>{key}: {person[0][key]}</div>)
   
     return (
     <div className='profile'>
diff --git a/src/index.js b/src/index.js
index e92a0f66..269ccf62 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,11 +6,12 @@ import App from "./App";
 import "./index.css";
 import users from "./users";
 
-let currentUser = {};
+let currentUser;
 
 function selectUser(user) {
   currentUser = user;
   console.log(currentUser);
+  render();
 }
 
 function render() {

From e424a8119dacb3f88edb113f29828df2be62dbda Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 03:08:40 -0500
Subject: [PATCH 22/28] selecting

---
 package.json | 13 +++++-----
 src/App.js   | 31 ++++++++++++++++++++++-
 src/index.js |  1 +
 yarn.lock    | 71 ++++++++++++++++++++++++++++++++++++++++++++--------
 4 files changed, 98 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index d2fceedf..f3640f61 100644
--- a/package.json
+++ b/package.json
@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-eslint": "7.0",
-    "eslint": "3.8.1",
+    "babel-eslint": "^7.0.0",
+    "eslint": "^3.8.1",
     "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-react": "6.4.1",
-    "react-scripts": "0.7.0"
+    "eslint-plugin-react": "^6.4.1",
+    "react-scripts": "^0.7.0"
   },
   "dependencies": {
     "foreman": "^2.0.0",
     "json-server": "^0.9.4",
-    "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react": "^15.6.1",
+    "react-dom": "^15.3.2",
+    "react-select": "^1.0.0-rc.5"
   },
   "scripts": {
     "start": "nf start",
diff --git a/src/App.js b/src/App.js
index 7781c140..9ad42fa4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,9 +3,32 @@ import logo from "./logo.svg";
 import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
+import Select from 'react-select';
 
-function App(props) {
+// var Select = require('react-select');
+
+var options = [
+  { value: 'one', label: 'One' },
+  { value: 'two', label: 'Two' }
+];
+
+function logChange(val) {
+  console.log("Selected: " + JSON.stringify(val));
+}
 
+
+//import Select from "react-select";
+
+//filter the options based on buttons, build the array to send to the select element. 
+function App(props) {
+  
+  let names = props.users.map((x) => {
+    return {
+      value:x.first_name, 
+      label:x.first_name
+    }
+    });
+  console.log(names)
   return (
     <div className="App">
       <div className="App-header">
@@ -18,6 +41,12 @@ function App(props) {
        <ListOfUsers users={props.users} getUser={props.getUser} /> 
        console.log(props)
          <UserDetail user={props.curUser} />
+         <Select
+            name="form-field-name"
+            value="one"
+            options={names}
+            onChange={logChange}
+          />
     </div>
   );
 }
diff --git a/src/index.js b/src/index.js
index 269ccf62..8ecebfd8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
 import users from "./users";
+import 'react-select/dist/react-select.css';
 
 let currentUser;
 
diff --git a/yarn.lock b/yarn.lock
index 361a32da..38035d37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -351,7 +351,7 @@ babel-core@^6.11.4, babel-core@^6.24.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-eslint@7.0, babel-eslint@7.0.0:
+babel-eslint@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.0.0.tgz#54e51b4033f54ac81326ecea4c646a779935196d"
   dependencies:
@@ -360,6 +360,15 @@ babel-eslint@7.0, babel-eslint@7.0.0:
     babylon "^6.11.2"
     lodash.pickby "^4.6.0"
 
+babel-eslint@^7.0.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
 babel-generator@^6.17.0, babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0:
   version "6.24.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56"
@@ -1267,6 +1276,10 @@ babylon@^6.11.0, babylon@^6.11.2, babylon@^6.13.0, babylon@^6.15.0:
   version "6.16.1"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
 
+babylon@^6.17.0:
+  version "6.17.4"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
+
 balanced-match@^0.4.1, balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -1527,6 +1540,10 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
+classnames@^2.2.4:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+
 clean-css@4.0.x:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.10.tgz#6be448d6ba8c767654ebe11f158b97a887cb713f"
@@ -1785,6 +1802,14 @@ create-error-class@^3.0.1:
   dependencies:
     capture-stack-trace "^1.0.0"
 
+create-react-class@^15.5.2, create-react-class@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 cross-spawn@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -2318,7 +2343,7 @@ eslint-plugin-react@6.4.1:
     doctrine "^1.2.2"
     jsx-ast-utils "^1.3.1"
 
-eslint-plugin-react@^6.9.0:
+eslint-plugin-react@^6.4.1:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-6.10.3.tgz#c5435beb06774e12c7db2f6abaddcbf900cd3f78"
   dependencies:
@@ -2366,7 +2391,7 @@ eslint@3.8.1:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-eslint@^3.14.0:
+eslint@^3.8.1:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
   dependencies:
@@ -3997,7 +4022,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -4371,7 +4396,7 @@ object-assign@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0:
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4911,7 +4936,14 @@ promise@7.1.1, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@^15.5.10, prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
+prop-types@~15.5.7:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
@@ -5016,7 +5048,14 @@ react-dom@^15.3.2:
     object-assign "^4.1.0"
     prop-types "~15.5.7"
 
-react-scripts@0.7.0:
+react-input-autosize@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.4.tgz#cbc45072d4084ddc57806db8e3b34e644b8366ac"
+  dependencies:
+    create-react-class "^15.5.2"
+    prop-types "^15.5.8"
+
+react-scripts@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.7.0.tgz#e499ebaf8bb077f7045770eaef1df5cfe308e3e0"
   dependencies:
@@ -5067,14 +5106,24 @@ react-scripts@0.7.0:
   optionalDependencies:
     fsevents "1.0.14"
 
-react@^15.3.2:
-  version "15.5.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
+react-select@^1.0.0-rc.5:
+  version "1.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.0.0-rc.5.tgz#9d316f252b1adc372ddb5cdf1f119c6b7cfdb5d6"
+  dependencies:
+    classnames "^2.2.4"
+    create-react-class "^15.5.2"
+    prop-types "^15.5.8"
+    react-input-autosize "^1.1.3"
+
+react@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
   dependencies:
+    create-react-class "^15.6.0"
     fbjs "^0.8.9"
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
-    prop-types "^15.5.7"
+    prop-types "^15.5.10"
 
 read-all-stream@^3.0.0:
   version "3.1.0"

From 308232b9db84f6a3780ea775c9094d21e4b30962 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@yahoo.com>
Date: Sun, 13 Aug 2017 03:51:08 -0500
Subject: [PATCH 23/28] need to synch

---
 src/App.js                    |  1 +
 src/components/ListOfUsers.js | 12 +++++++---
 src/courses.js                | 44 +++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/courses.js

diff --git a/src/App.js b/src/App.js
index 7781c140..5e23a1c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
 
+
 function App(props) {
 
   return (
diff --git a/src/components/ListOfUsers.js b/src/components/ListOfUsers.js
index 642ab60f..642ba91c 100644
--- a/src/components/ListOfUsers.js
+++ b/src/components/ListOfUsers.js
@@ -42,10 +42,16 @@ export default class ListOfUsers extends React.Component {
     }
     render(){
          
-        let userAr = this.props.users.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);
+      
 			 let show = this.state.visible ? 'Hide' : 'Show';
-				
-        return(
+		var filterUsers = this.props.users.filter((u)=>{
+                // if(this.state.searchText == ""){
+                //     return true;
+                // }
+                return u.first_name.indexOf(this.state.searchText) > -1 ? true : (this.state.searchText == "" ? true : false);
+            })
+            let userAr = filterUsers.map((x,i) => <div key={i}><a href='#' onClick={(e) =>{this.userClick(e)}}>{x.first_name}</a></div>);		
+             return(
                 <div>
                     <input type='text' label='search' defaultValue='Search' onChange={(e)=>{this.handleChange(e)}}></input>
                     <br />
diff --git a/src/courses.js b/src/courses.js
new file mode 100644
index 00000000..920f776d
--- /dev/null
+++ b/src/courses.js
@@ -0,0 +1,44 @@
+let courses = [
+  {
+    location: "Dallas",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San Antonio",
+    days: ["Mon","Tue","Wed","Thu"],
+    course: "Dot-Net",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San-Antonio",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Dallas",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Mon", "Wed","Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  
+
+]

From 1fd84a958b308d83082178c0c62dc5963d8ae702 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 04:02:32 -0500
Subject: [PATCH 24/28] course tester

---
 src/courses.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/courses.js

diff --git a/src/courses.js b/src/courses.js
new file mode 100644
index 00000000..920f776d
--- /dev/null
+++ b/src/courses.js
@@ -0,0 +1,44 @@
+let courses = [
+  {
+    location: "Dallas",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San Antonio",
+    days: ["Mon","Tue","Wed","Thu"],
+    course: "Dot-Net",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "San-Antonio",
+    days: ["Mon", "Wed"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)
+  },
+  {
+    location: "Dallas",
+    days: ["Tue","Thu"],
+    course: "Web-VR",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)},
+  {
+    location: "Austin",
+    days: ["Mon", "Wed","Tue","Thu"],
+    course: "Full-Stack",
+    startDate: new dateTime(9/15/17)
+  },
+  
+
+]

From 2bef4066a0fcbffd866bf1d7c96504cc76114a7a Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 11:31:27 -0500
Subject: [PATCH 25/28] on to the filtering

---
 src/App.js     | 34 ++++++++++++++++++++++------------
 src/courses.js | 33 ++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9ad42fa4..c7c7dbf0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,13 +4,23 @@ import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
 import Select from 'react-select';
+import courses from "./courses"
 
 // var Select = require('react-select');
 
-var options = [
-  { value: 'one', label: 'One' },
-  { value: 'two', label: 'Two' }
-];
+var courseList = courses.map(function(x){ 
+  return (
+  {
+  value:x.location,
+  label:x.location
+  }
+  )
+});
+
+// var options = [
+//   { value: 'one', label: 'One' },
+//   { value: 'two', label: 'Two' }
+// ];
 
 function logChange(val) {
   console.log("Selected: " + JSON.stringify(val));
@@ -22,13 +32,13 @@ function logChange(val) {
 //filter the options based on buttons, build the array to send to the select element. 
 function App(props) {
   
-  let names = props.users.map((x) => {
-    return {
-      value:x.first_name, 
-      label:x.first_name
-    }
-    });
-  console.log(names)
+  // let names = props.users.map((x) => {
+  //   return {
+  //     value:x.first_name, 
+  //     label:x.first_name
+  //   }
+  //   });
+  
   return (
     <div className="App">
       <div className="App-header">
@@ -44,7 +54,7 @@ function App(props) {
          <Select
             name="form-field-name"
             value="one"
-            options={names}
+            options={courseList}
             onChange={logChange}
           />
     </div>
diff --git a/src/courses.js b/src/courses.js
index 920f776d..81c0667e 100644
--- a/src/courses.js
+++ b/src/courses.js
@@ -3,42 +3,41 @@ let courses = [
     location: "Dallas",
     days: ["Mon", "Wed"],
     course: "Full-Stack",
-    startDate: new dateTime(9/15/17)
-  },
-  {
+    startDate: "9/3/17"
+  }, {
     location: "San Antonio",
     days: ["Mon","Tue","Wed","Thu"],
     course: "Dot-Net",
-    startDate: new dateTime(9/15/17)
-  },
-  {
+    startDate: "9/20/17"
+  }, {
     location: "San-Antonio",
     days: ["Mon", "Wed"],
     course: "Full-Stack",
-    startDate: new dateTime(9/15/17)
-  },
-  {
+    startDate: "9/15/17"
+  }, {
     location: "Austin",
     days: ["Tue","Thu"],
     course: "Web-VR",
-    startDate: new dateTime(9/15/17)
-  },
-  {
+    startDate: "9/3/17"
+  }, {
     location: "Dallas",
     days: ["Tue","Thu"],
     course: "Web-VR",
-    startDate: new dateTime(9/15/17)},
-  {
+    startDate: "9/20/17"
+  },
+    {
     location: "Austin",
     days: ["Tue","Thu"],
     course: "Full-Stack",
-    startDate: new dateTime(9/15/17)},
-  {
+    startDate: "9/15/17"
+  },{
     location: "Austin",
     days: ["Mon", "Wed","Tue","Thu"],
     course: "Full-Stack",
-    startDate: new dateTime(9/15/17)
+    startDate: "9/3/15"
   },
   
 
 ]
+
+export default courses;
\ No newline at end of file

From b48e46a5eabb714ef8adb210283cda35ab8c27f4 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 14:21:12 -0500
Subject: [PATCH 26/28] progress

---
 src/App.js                   | 46 ++++++++++++++++-----------------
 src/components/SelectCont.js | 49 ++++++++++++++++++++++++++++++++++++
 src/courses.js               | 14 +++++------
 3 files changed, 78 insertions(+), 31 deletions(-)
 create mode 100644 src/components/SelectCont.js

diff --git a/src/App.js b/src/App.js
index c7c7dbf0..79e665e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,32 +4,19 @@ import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
 import Select from 'react-select';
+// import SelectCont from './components/SelectCont';
 import courses from "./courses"
 
-// var Select = require('react-select');
-
-var courseList = courses.map(function(x){ 
-  return (
-  {
-  value:x.location,
-  label:x.location
-  }
-  )
-});
-
-// var options = [
-//   { value: 'one', label: 'One' },
-//   { value: 'two', label: 'Two' }
-// ];
-
-function logChange(val) {
-  console.log("Selected: " + JSON.stringify(val));
+let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+function onChange(value) {
+  
 }
 
-
-//import Select from "react-select";
-
-//filter the options based on buttons, build the array to send to the select element. 
 function App(props) {
   
   // let names = props.users.map((x) => {
@@ -51,12 +38,23 @@ function App(props) {
        <ListOfUsers users={props.users} getUser={props.getUser} /> 
        console.log(props)
          <UserDetail user={props.curUser} />
+         <Select
+          options={days}
+          />
+          {/* <Select
+            name="DAYS"
+            value={value}
+            options={days}
+            onChange={onChange}
+            label="Days"
+          />
+
          <Select
             name="form-field-name"
             value="one"
             options={courseList}
-            onChange={logChange}
-          />
+            onChange={onChange}
+          /> */}
     </div>
   );
 }
diff --git a/src/components/SelectCont.js b/src/components/SelectCont.js
new file mode 100644
index 00000000..1e900105
--- /dev/null
+++ b/src/components/SelectCont.js
@@ -0,0 +1,49 @@
+import React from "react";
+import {Component} from "react";
+import Select from 'react-select';
+import courses from "../courses";
+
+// var Select = require('react-select');
+export default class SelectCont extends React.Component  {
+  constructor(props){
+    this.State ={
+      displayName: "Days Of The Week",
+      options: []
+  }
+
+this.componentDidMount(){
+    let days = [
+      {value:"M", label:"MON-WENS"}, 
+      {value:"T",label:"TUES-THURS"},
+      {value:"W", label:"WENS-FRI"},
+      {value:"S",label:"SAT"}
+    ];
+    this.setState({
+      options: days
+    });
+};    
+    
+  
+  
+ onChange(val) {
+  console.log(value);
+  this.setState({
+     value:val
+  }
+}
+  }
+  render() {
+
+    return (
+
+      <Select 
+      options={days}
+      onChange={onChange}
+      />
+    );
+  };
+}
+
+//import Select from "react-select";
+
+//filter the options based on buttons, build the array to send to the select element. 
\ No newline at end of file
diff --git a/src/courses.js b/src/courses.js
index 81c0667e..1d4d96ae 100644
--- a/src/courses.js
+++ b/src/courses.js
@@ -1,38 +1,38 @@
 let courses = [
   {
     location: "Dallas",
-    days: ["Mon", "Wed"],
+    days: ["M"],
     course: "Full-Stack",
     startDate: "9/3/17"
   }, {
     location: "San Antonio",
-    days: ["Mon","Tue","Wed","Thu"],
+    days: ["M","T"],
     course: "Dot-Net",
     startDate: "9/20/17"
   }, {
     location: "San-Antonio",
-    days: ["Mon", "Wed"],
+    days: ["M"],
     course: "Full-Stack",
     startDate: "9/15/17"
   }, {
     location: "Austin",
-    days: ["Tue","Thu"],
+    days: ["T"],
     course: "Web-VR",
     startDate: "9/3/17"
   }, {
     location: "Dallas",
-    days: ["Tue","Thu"],
+    days: ["T"],
     course: "Web-VR",
     startDate: "9/20/17"
   },
     {
     location: "Austin",
-    days: ["Tue","Thu"],
+    days: ["T"],
     course: "Full-Stack",
     startDate: "9/15/17"
   },{
     location: "Austin",
-    days: ["Mon", "Wed","Tue","Thu"],
+    days: ["S"],
     course: "Full-Stack",
     startDate: "9/3/15"
   },

From 35437e4d4a7cc34fe27f7eecc1fda8f54e64a9be Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 15:29:48 -0500
Subject: [PATCH 27/28] going back to the class

---
 src/components/SelectCont.js | 37 +++++++-----------------------------
 1 file changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/components/SelectCont.js b/src/components/SelectCont.js
index 1e900105..94a5231f 100644
--- a/src/components/SelectCont.js
+++ b/src/components/SelectCont.js
@@ -3,46 +3,23 @@ import {Component} from "react";
 import Select from 'react-select';
 import courses from "../courses";
 
-// var Select = require('react-select');
-export default class SelectCont extends React.Component  {
-  constructor(props){
-    this.State ={
-      displayName: "Days Of The Week",
-      options: []
-  }
-
-this.componentDidMount(){
-    let days = [
+let days = [
       {value:"M", label:"MON-WENS"}, 
       {value:"T",label:"TUES-THURS"},
       {value:"W", label:"WENS-FRI"},
       {value:"S",label:"SAT"}
     ];
-    this.setState({
-      options: days
-    });
-};    
-    
-  
-  
- onChange(val) {
-  console.log(value);
-  this.setState({
-     value:val
-  }
-}
-  }
-  render() {
 
-    return (
 
+export default function SelectCont(props){
+
+  return
       <Select 
       options={days}
-      onChange={onChange}
-      />
-    );
+       />
+    
   };
-}
+
 
 //import Select from "react-select";
 

From 05556120e7ebd366568f7292041d48bdae49cbd6 Mon Sep 17 00:00:00 2001
From: stackbaxter <stackbaxter@gmail.com>
Date: Sun, 13 Aug 2017 16:18:54 -0500
Subject: [PATCH 28/28] progress

---
 src/App.js                   | 23 ++---------------------
 src/components/SelectCont.js |  7 ++++---
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/App.js b/src/App.js
index 79e665e3..0b34557d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import "./App.css";
 import ListOfUsers from './components/ListOfUsers';
 import UserDetail from './components/UserDetail';
 import Select from 'react-select';
-// import SelectCont from './components/SelectCont';
+import SelectCont from './components/SelectCont';
 import courses from "./courses"
 
 let days = [
@@ -13,9 +13,6 @@ let days = [
       {value:"W", label:"WENS-FRI"},
       {value:"S",label:"SAT"}
     ];
-function onChange(value) {
-  
-}
 
 function App(props) {
   
@@ -38,23 +35,7 @@ function App(props) {
        <ListOfUsers users={props.users} getUser={props.getUser} /> 
        console.log(props)
          <UserDetail user={props.curUser} />
-         <Select
-          options={days}
-          />
-          {/* <Select
-            name="DAYS"
-            value={value}
-            options={days}
-            onChange={onChange}
-            label="Days"
-          />
-
-         <Select
-            name="form-field-name"
-            value="one"
-            options={courseList}
-            onChange={onChange}
-          /> */}
+         <SelectCont />
     </div>
   );
 }
diff --git a/src/components/SelectCont.js b/src/components/SelectCont.js
index 94a5231f..6f5856d5 100644
--- a/src/components/SelectCont.js
+++ b/src/components/SelectCont.js
@@ -13,12 +13,13 @@ let days = [
 
 export default function SelectCont(props){
 
-  return
+  return(<div>
+    <input type="checkbox" value="off" label="M-W">MonWed</input>
       <Select 
       options={days}
        />
-    
-  };
+    </div>
+  )};
 
 
 //import Select from "react-select";