Add checkbox

Author: alecvm24

TodoItem.js

@@ -1,9 +1,17 @@
-import React from 'react'
+import React from "react";
+
+function TodoItem({ task, deleteTask, toggleCompleted }) {
+  function handleChange() {
+    toggleCompleted(task.id);
+  }
 
-function TodoItem(_todo) {
   return (
-    <div>TodoItem</div>
-  )
+    <div className="todo-item">
+      <input type="checkbox" checked={task.completed} onChange={handleChange} />
+      <p>{task.text}</p>
+      <button onClick={() => deleteTask(task.id)}>X</button>
+    </div>
+  );
 }
 
-export default TodoItem
+export default TodoItem;

TodoList.js

@@ -1,14 +1,58 @@
-import React from 'react'
+import React, {useState} from 'react'
 import TodoItem from './TodoItem'
 
-function TodoList({todos}) {
-  return (
-    <div>
-        {todos.map((todo, index) => (
-        <TodoItem key={index} todo={todo} />
-        ))}
-    </div>
-  )
+function TodoList() {
+  const [tasks, setTasks] = useState([
+    {
+        id: 1,
+        text: 'Doctor Appointment',
+        completed: true
+    },
+    {
+        id: 2,
+        text: 'Meeting at school',
+        completed: false
+    }
+  ])
+
+    const [text, setText] = useState('')
+    function addTask(text) {
+        const newTask = {
+            id: Date.now(),
+            text,
+            completed: false
+        }
+        setTasks([...tasks, newTask])
+        setText('')
+    }
+
+    function deleteTask(id) {
+        setTasks(tasks.filter(task => task.id !== id))
+    }
+    
+    function toggleCompleted (id) {
+        setTasks(tasks.map(task => {
+            if (task.id === id) {
+                return {...task, completed: !task.completed}
+            } else {
+                return task
+            }
+        }))
+    }
+
+    return (
+        <div className='todo-list'>
+            {tasks.map(task => (
+                <TodoItem 
+                    key={task.id} task={task} deleteTask={deleteTask} toggleCompleted={toggleCompleted} 
+                />
+            ))}
+                <input 
+                    value={text} onChange={e => setText(e.target.value)}
+                />
+                <button onClick={() => addTask(text)}>Add</button>
+        </div>
+    )
 }
 
 export default TodoList

app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import TodoList from './TodoList'
+
+function App() {
+  return (
+    <div className='App'>
+      <TodoList/>
+    </div>
+  )
+}
+
+export default App;