maybe working

my-app/src/components/UserItem.js

@@ -27,7 +27,8 @@ class UserItem extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            displayingPage: DISPLAY.LIST
+            displayingPage: DISPLAY.LIST,
+            editingUser: null
         }
 
         this.MapAllUsers = this.MapAllUsers.bind(this);
@@ -43,8 +44,9 @@ class UserItem extends Component {
         showDeleteUserModalAction(dialogModalData)
     }
 
-    handleShowEditPage(e) {
+    handleShowEditPage(e, user) {
         e.preventDefault();
+        this.setState({ editingUser: user})
         this.setState({ displayingPage: DISPLAY.EDIT })
     }
 
@@ -96,7 +98,7 @@ class UserItem extends Component {
                                         <ListGroup.Item >Last Name: {user.lastName}</ListGroup.Item>
                                     </ListGroup>
                                     <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
-                                        <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, currentUserID)} id={editButtonID} >Edit</Button>
+                                        <Button variant="primary" onClick={(e) => this.handleShowEditPage(e, user)} id={editButtonID} >Edit</Button>
                                         <Button variant="primary" type="submit" onClick={(e) => this.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
                                             Delete
                                         </Button>
@@ -117,12 +119,22 @@ class UserItem extends Component {
     }
 
     render() {
-        return (
-            <div >
-                <Button onClick={this.handleShowCreatePage}>
+        var workspace
+        switch (this.state.displayingPage) {
+            case DISPLAY.LIST :
+                workspace = <Button onClick={this.handleShowCreatePage}>
                     <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
                 </Button>
                 {this.MapAllUsers()}
+                case DISPLAY.CREATE :
+                    workspace = <CreateNewUser goBack={this.handleSwitchToList} />
+                case DISPLAY.EDIT :
+                    workspace =  <EditUser goBack={this.handleSwitchToList} editUser={this.state.editingUser} />
+
+        }
+        return (
+            <div >
+                {workspace}
             </div>
         )
     }