escape function added

src/components/TodoHome.js

-import React, { useState } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import TodoForm from "./TodoForm";
 import TodoItem from "./TodoItem";
 import Header from "./Header";
-import CompletedTodos from "./CompletedTodos"
+import CompletedTodos from "./CompletedTodos";
 
 function TodoHome() {
 
@@ -50,6 +50,21 @@ function TodoHome() {
     setEdit(false);
   };
 
+  const escFunction = useCallback((event) => {
+    if (event.keyCode === 27) {
+      console.log("esc");
+      return editTodo();
+    }
+  });
+
+  useEffect(() => {
+    document.addEventListener("keydown", escFunction);
+
+    return () => {
+      document.removeEventListener("keydown", escFunction);
+    };
+  }, [escFunction]);
+
   return (
     <>
       <Header todos={todos} />
@@ -63,6 +78,7 @@ function TodoHome() {
         editId={editId}
         inputValue={inputValue}
         setInputValue={setInputValue}
+        escFunction={escFunction}
       />
       <TodoForm onSubmit={addTodo} />
 

src/components/TodoItem.js

 import React from "react";
 import { CgCloseO } from "react-icons/cg";
-
 const TodoItem = ({
   todos,
   completeTodo,
@@ -9,7 +8,8 @@ const TodoItem = ({
   editId,
   handleEditChange,
   inputValue,
-  setInputValue
+  setInputValue,
+  escFunction
 }) => {
   return todos.map((todo) => (
     <div className="task">
@@ -20,6 +20,7 @@ const TodoItem = ({
               type="text"
               value={inputValue}
               onChange={(e) => setInputValue(e.target.value)}
+              escFunction={(e) => escFunction(e.key)}
             />
           </div>
           <button className="btn" onClick={() => editTodo(todo.id, inputValue)}>Save</button>

src/index.css

@@ -36,7 +36,7 @@ body {
 .form-control input {
   width: 100%;
   height: 35px;
-  margin: 5px;
+  margin: 5px 2px 3px 3px;
   padding: 3px 7px;
   font-size: 17px;
   border: 1px solid #ccc;