Add newTodoForm component

Author: nicorithner

react-todos/src/App.js

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import "./App.css";
+import NewTodoForm from "./components/NewTodoForm";
 import TodoTable from "./components/TodoTable";
 
 function App() {
@@ -17,7 +18,7 @@ function App() {
         rowDescription: "New todo",
         rowAssigned: "User Three",
       };
-      setTodos(todos => [...todos, newTodo])
+      setTodos((todos) => [...todos, newTodo]);
     }
   };
 
@@ -27,9 +28,7 @@ function App() {
         <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>
+          <NewTodoForm />
         </div>
       </div>
     </div>

react-todos/src/components/NewTodoForm.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+export default function NewTodoForm() {
+  const [description, setDescription] = useState("");
+  const [assigned, setAssigned] = useState("");
+
+  return (
+    <div className="mt-5">
+      <form>
+        <div className="mb-3">
+          <label className="form-label">Assigned</label>
+          <input
+            type="text"
+            className="form-control"
+            required
+            onChange={(e) => setAssigned(e.target.value)}
+            value={assigned}
+          ></input>
+        </div>
+        <div className="mb-3">
+          <label className="form-label">Description</label>
+          <textarea
+            className="form-control"
+            row={3}
+            required
+            onChange={(e) => setDescription(e.target.value)}
+            value={description}
+          />
+        </div>
+        <button type="button" className="btn btn-primary mt-3">
+          Add ToDo
+        </button>
+      </form>
+    </div>
+  );
+}