Add functionality to add todo dynamically

Author: nicorithner

react-todos/src/App.js

@@ -11,12 +11,12 @@ function App() {
   ];
   const [todos, setTodos] = useState(seededTodos);
 
-  const addTodo = () => {
+  const addTodo = (description, assigned) => {
     if (seededTodos.length > 0) {
       const newTodo = {
         rowNumber: todos.length + 1,
-        rowDescription: "New todo",
-        rowAssigned: "User Three",
+        rowDescription: description,
+        rowAssigned: assigned,
       };
       setTodos((todos) => [...todos, newTodo]);
     }
@@ -28,7 +28,7 @@ function App() {
         <div className="card-header">Your Todo's</div>
         <div className="card-body">
           <TodoTable todos={todos} />
-          <NewTodoForm />
+          <NewTodoForm addTodo={addTodo} />
         </div>
       </div>
     </div>

react-todos/src/components/NewTodoForm.js

@@ -1,9 +1,17 @@
 import { useState } from "react";
 
-export default function NewTodoForm() {
+export default function NewTodoForm(props) {
   const [description, setDescription] = useState("");
   const [assigned, setAssigned] = useState("");
 
+  const submitTodo = () => {
+    if (description !== "" && assigned !== "") {
+      props.addTodo(description, assigned);
+      setDescription("");
+      setAssigned("");
+    }
+  };
+
   return (
     <div className="mt-5">
       <form>
@@ -27,7 +35,11 @@ export default function NewTodoForm() {
             value={description}
           />
         </div>
-        <button type="button" className="btn btn-primary mt-3">
+        <button
+          type="button"
+          className="btn btn-primary mt-3"
+          onClick={submitTodo}
+        >
           Add ToDo
         </button>
       </form>