Add useState

Author: nicorithner

react-todos/src/App.js

@@ -1,12 +1,14 @@
+import { useState } from "react";
 import "./App.css";
 import TodoTable from "./components/TodoTable";
 
 function App() {
-  const todos = [
+  const seededTodos = [
     { rowNumber: 1, rowDescription: "Feed puppy", rowAssigned: "User One" },
     { rowNumber: 2, rowDescription: "Water plants", rowAssigned: "User Two" },
     { rowNumber: 3, rowDescription: "Make dinner", rowAssigned: "User One" },
   ];
+  const [todos, setTodos] = useState(seededTodos);
 
   const addTodo = () => {
     if (todos.length > 0) {
@@ -15,8 +17,7 @@ function App() {
         rowDescription: "New todo",
         rowAssigned: "User Three",
       };
-      todos.push(newTodo);
-      return <TodoTable todos={todos}/>
+      setTodos(newTodo);
     }
   };
 
@@ -25,6 +26,7 @@ function App() {
       <div className="card">
         <div className="card-header">Your Todo's</div>
         <div className="card-body">
+          <TodoTable todos={todos} />
           <button className="btn btn-primary" onClick={addTodo}>
             Add New To-Do
           </button>