From ec9aa2a35aafee944ad30ac013a55593f813a447 Mon Sep 17 00:00:00 2001
From: Pheerawit Wasinphongwanit <pheerawit@gmail.com>
Date: Sat, 2 Sep 2017 21:17:49 +0700
Subject: [PATCH] The Route Component

---
 contacts/src/App.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/contacts/src/App.js b/contacts/src/App.js
index fe9ab72..2660374 100644
--- a/contacts/src/App.js
+++ b/contacts/src/App.js
@@ -1,11 +1,11 @@
 import React, {Component} from 'react'
+import { Route } from 'react-router-dom'
 import ListContacts from './ListContacts'
 import * as ContactsAPI from './utils/ContactsAPI'
 import CreateContact from './CreateContact'
 
 class App extends Component {
   state = {
-    screen: 'list', // list, create
     contacts: []
   }
   removeContact = (contact) => {
@@ -24,20 +24,15 @@ class App extends Component {
 
   render() {  
     return (
-      <div>
-        {this.state.screen === 'list' && (
+      <div className="app">
+        <Route exact path="/"  render={() => (
           <ListContacts 
-          onDeleteContact={this.removeContact} 
-          contacts={this.state.contacts}
-          onNavigate={()=>{
-            this.setState({ screen: 'create'})
-          }}
+            onDeleteContact={this.removeContact} 
+            contacts={this.state.contacts}
           />
-        )}
+        )}/>
 
-        {this.state.screen === 'create' && (
-          <CreateContact />
-        )}
+        <Route path="/create" component={CreateContact} />
         
         
       </div>