updated file names, finished functionality for update

Author: NicholasKyleHoffman

src/App.js

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, Fragment } from 'react';
 import UserTable from './tables/UserTable';
 import AddUserForm from './forms/AddUserForm';
-import EditUserForm from './forms/EditUserForm'
+import EditUserForm from './forms/EditUsersForm';
 
 const App = () => {
   const usersData = [
@@ -11,11 +11,15 @@ const App = () => {
     { id:4, name:'Sheena, W.P.', username:'sheenaWp312' }
   ]
 
-// Hooks syntax - you define the two params in [x, y]. 
+
+  const initialFormState = {id:null, name:'', username:'' }
+
+// set state Hooks syntax - you define the two params in [x, y]. 
 // useState comes from React import for handling state
 
   const [users, setUsers] = useState(usersData)
-
+  const [editing, setEditing] = useState(false)
+  const [ currentUser, setCurrentUser ] = useState(initialFormState)
 
 // increment the ID of the new user manually - function will 
 // take a user object as a parameter,  add them to the users array of objects
@@ -29,12 +33,10 @@ const App = () => {
   // pass deleteUser through props to UserTable
   // use setter to take ID of user & filter them out of the users array 
   const deleteUser = (id) => {
+    setEditing(false)
+
     setUsers(users.filter(user => user.id !== id))
   }
-
-  const [editing, setEditing] = useState(false)
-  const initialFormState = {id:null, name:'', username:'' }
-  const [ currentUser, setCurrentUser ] = useState(initialFormState)
 
   const editRow = (user) => {
     setEditing(true)
@@ -47,17 +49,30 @@ const App = () => {
     setUsers(users.map(user=> (user.id === id ? updatedUser : user))) 
   }
 
-
   return (
     <div className="container">
-      <h1>CRUD React App with Hooks Instead of Classes</h1>
+      <h1>CRUD React App with Hooks - No Classes</h1>
       <div className="flex-row">
         <div className="flex-large">
-          <h2>Add User</h2>
-          <AddUserForm addUser={addUser} />
+          {editing ? (
+            <Fragment>
+              <h2>Edit user</h2>
+              <EditUserForm
+                editing={editing}
+                setEditing={setEditing}
+                currentUser={currentUser}
+                updateUser={updateUser}
+              />
+            </Fragment>
+          ) : (
+            <Fragment>
+              <h2>Add user</h2>
+              <AddUserForm addUser={addUser} />
+            </Fragment>
+          )}
         </div>
         <div className="flex-large">
-          <h2>View Users</h2>
+          <h2>View users</h2>
           <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
         </div>
       </div>

src/forms/EditUserForm renamed to src/forms/EditUsersForm.js

@@ -1,3 +1,5 @@
+import React, { useState, useEffect } from 'react'
+
 const EditUserForm = props => {
 	const [ user, setUser ] = useState(props.currentUser)
 
@@ -7,6 +9,13 @@ const EditUserForm = props => {
 		setUser({ ...user, [name]: value })
 	}
 
+	useEffect(
+		() => {
+			setUser(props.currentUser)
+		},
+		[props]
+	)
+
 	return (
 		<form
 			onSubmit={event => {