Create todo table component

Author: nicorithner

react-todos/src/App.js

@@ -1,5 +1,5 @@
 import "./App.css";
-import TodoRowItem from "./components/TodoRowItem";
+import TodoTable from "./components/TodoTable";
 
 function App() {
   const todos = [
@@ -13,24 +13,7 @@ function App() {
       <div className="card">
         <div className="card-header">Your Todo's</div>
         <div className="card-body">
-          <table className="table table-hover">
-            <thead>
-              <tr>
-                <th scope="col">#</th>
-                <th scope="col">Description</th>
-                <th scope="col">Assigned</th>
-              </tr>
-            </thead>
-            <tbody>
-              {todos.map((todo) => (
-                <TodoRowItem
-                  rowNumber={todo.rowNumber}
-                  rowDescription={todo.rowDescription}
-                  rowAssigned={todo.rowAssigned}
-                />
-              ))}
-            </tbody>
-          </table>
+              <TodoTable todos = {todos} />
         </div>
       </div>
     </div>

react-todos/src/components/TodoTable.js

@@ -0,0 +1,24 @@
+import TodoRowItem from "./TodoRowItem";
+
+export default function TodoTable(props) {
+  return (
+    <table className="table table-hover">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Description</th>
+          <th scope="col">Assigned</th>
+        </tr>
+      </thead>
+      <tbody>
+        {props.todos.map((todo) => (
+          <TodoRowItem
+            rowNumber={todo.rowNumber}
+            rowDescription={todo.rowDescription}
+            rowAssigned={todo.rowAssigned}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}