Tasks Component Part 1

react-hooks/home/package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "uuid": "^3.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

react-hooks/home/src/App.js

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import Joke from './Joke';
 import Stories from './Stories';
+import Tasks from './Tasks';
 
 function App() {
   const [userQuery, setUserQuery] = useState('');
@@ -35,6 +36,8 @@ function App() {
       <hr />
       <Joke />
       <hr />
+      <Tasks />
+      <hr />
       <Stories />
     </div>
   );

react-hooks/home/src/Tasks.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import uuid from 'uuid/v4';
+
+function Tasks() {
+  const [taskText, setTaskText] = useState('');
+  const [tasks, setTasks] = useState([]);
+  const [completedTasks, setCompletedTasks] = useState([]);
+
+  const updateTaskText = event => {
+    setTaskText(event.target.value);
+  }
+
+  const addTask = () => {
+    setTasks([...tasks, { taskText, id: uuid() }]);
+  }
+
+  console.log('tasks', tasks);
+
+  return (
+    <div>
+      <h3>Tasks</h3>
+      <div className='form'>
+        <input value={taskText} onChange={updateTaskText} />
+        <button onClick={addTask}>Add Task</button>
+      </div>
+      <div className='task-list'>
+        {
+          tasks.map(task => {
+            const { id, taskText } = task;
+
+            return <div key={id}>{taskText}</div>
+          })
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Tasks;