Dynamically Render Pages

tupkung · Sep 2, 2017 · 7f43eba · 7f43eba
1 parent 37e23f9
commit 7f43eba
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/contacts/src/App.js b/contacts/src/App.js
@@ -1,9 +1,11 @@
 import React, {Component} from 'react'
 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) => {
@@ -23,7 +25,21 @@ class App extends Component {
   render() {  
     return (
       <div>
-        <ListContacts onDeleteContact={this.removeContact} contacts={this.state.contacts}/>
+        {this.state.screen === 'list' && (
+          <ListContacts 
+          onDeleteContact={this.removeContact} 
+          contacts={this.state.contacts}
+          onNavigate={()=>{
+            this.setState({ screen: 'create'})
+          }}
+          />
+        )}
+
+        {this.state.screen === 'create' && (
+          <CreateContact />
+        )}
+
+
       </div>
     )
   }

diff --git a/contacts/src/CreateContact.js b/contacts/src/CreateContact.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+
+class CreateContact extends Component {
+    render() {
+        return (
+            <div>Create Contact!</div>
+        )
+    }
+}
+
+
+export default CreateContact
diff --git a/contacts/src/ListContacts.js b/contacts/src/ListContacts.js
@@ -22,7 +22,7 @@ class ListContacts extends Component {
     }
 
     render() {
-        const {contacts, onDeleteContact} = this.props
+        const {contacts, onDeleteContact, onNavigate} = this.props
         const {query} = this.state
 
         let showingContacts
@@ -45,6 +45,12 @@ class ListContacts extends Component {
                         value={this.state.query}
                         onChange={(event) => this.updateQuery(event.target.value)}
                     />
+
+                    <a
+                        href="#create"
+                        onClick={onNavigate}
+                        className="add-contact"
+                    >Add Contact</a>
                 </div>
                 {showingContacts.length !== contacts.length && (
                     <div className='showing-contacts'>