TodoItem Component

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}

src/components/InputForm.jsx

@@ -10,9 +10,6 @@ const InputForm = () => {
         onChange={''}       
         required
       />
-
-
-
       <button type="submit">Add</button>
     </form>
   );

src/components/TodoItem.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const TodoItem = ({ todo, onDelete, onEdit }) => {
+  const { id, title, completed } = todo;
+
+  const handleDelete = () => {
+    onDelete(id);
+  };
+
+  const handleEdit = () => {
+    onEdit(id);
+  };
+
+  return (
+    <div className="todo-item">
+      <input type="checkbox" checked={completed} onChange={() => {}} />
+      <p className={completed ? 'completed' : ''}>{title}</p>
+      <button onClick={handleEdit}>Edit</button>
+      <button onClick={handleDelete}>Delete</button>
+    </div>
+  );
+};
+
+export default TodoItem;