Add conditional button to show form

Author: nicorithner

react-todos/src/App.js

@@ -4,6 +4,8 @@ import NewTodoForm from "./components/NewTodoForm";
 import TodoTable from "./components/TodoTable";
 
 function App() {
+  const [showAddTodoForm, setShowAddTodoForm] = useState(false);
+
   const seededTodos = [
     { rowNumber: 1, rowDescription: "Feed puppy", rowAssigned: "User One" },
     { rowNumber: 2, rowDescription: "Water plants", rowAssigned: "User Two" },
@@ -40,7 +42,13 @@ function App() {
         <div className="card-header">Your Todo's</div>
         <div className="card-body">
           <TodoTable todos={todos} deleteTodo={deleteTodo} />
-          <NewTodoForm addTodo={addTodo} />
+          <button
+            onClick={() => setShowAddTodoForm(!showAddTodoForm)}
+            className="btn btn-primary"
+          >
+            {showAddTodoForm ? "Close New Todo" : "New Todo"}
+          </button>
+          {showAddTodoForm && <NewTodoForm addTodo={addTodo} />}
         </div>
       </div>
     </div>