close button issue on edit

.vscode/settings.json

+{
+  "liveServer.settings.port": 5502
+}

package.json

@@ -11,7 +11,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-router-dom": "^6.15.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^2.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -12,6 +12,7 @@ function App() {
   const [editTodo, setEditTodo] = useState(null);
   const [isedit, setIsEdit] = useState(false);
 
+
   const deleteTask = async (id) => {
     await fetch(`http://192.168.1.91:5000/task/${id}`, { method: "DELETE" });
     setTask(task.filter((e) => e.id !== id));
@@ -53,14 +54,17 @@ function App() {
     return response;
   };
   const editTask = async (id) => {
+    console.log("dskdn")
     const res = await getTaskById(id);
-    setEditTodo(res);
-    setIsEdit(!isedit);
-    setShowAddTask(!showAddTask);
+    if(res){
+      setEditTodo(res);
+      setIsEdit(true);
+      setShowAddTask(true);
+    }
+   
   };
 
   const editTodoTask = async (datas) => {
-    console.log(datas);
     const response = await fetch(
       `http://192.168.1.91:5000/task/${editTodo.id}`,
       {
@@ -70,8 +74,9 @@ function App() {
       }
     );
     const data = await response.json();
+
     setTask(task.map((e) => (e.id === data.id ? data : e)));
-    setIsEdit(!isedit);
+ 
   };
 
 
@@ -84,7 +89,7 @@ function App() {
     <Router>
       <div className="container">
         <Header
-          addtask={() => setShowAddTask(!showAddTask)}
+          addtask={() => {setShowAddTask(!showAddTask);setIsEdit(false)}}
           showAdd={showAddTask}
    
         />
@@ -95,14 +100,15 @@ function App() {
             exact
             element={
               <>
-                {showAddTask && (
+                
                   <Form
                     addtask={addTask}
                     onEdit={editTodoTask}
                     onEditData={editTodo}
                     iseditTask={isedit}
+                    isAddClose={showAddTask}
                   />
-                )}
+                
                 {task.length > 0 ? (
                   <Tasks
                     task={task}

src/Form.js

@@ -2,7 +2,7 @@ import React, { useState,useEffect } from "react";
 
 
 
-function Form({addtask,onEdit,iseditTask,onEditData}) {
+function Form({addtask,onEdit,iseditTask,onEditData,isAddClose}) {
     const [text ,setText]=useState("");
     const [day ,setDay]=useState("");
     const [remainder ,setRemainder]=useState(false);
@@ -24,15 +24,27 @@ function Form({addtask,onEdit,iseditTask,onEditData}) {
 
 
     useEffect(()=>{
-      console.log(iseditTask)
-     if(iseditTask){
+    
+  console.log("hello",onEditData,iseditTask,isAddClose)
+      if(onEditData!=null && iseditTask){
+
+    
         setText(onEditData.text);
         setDay(onEditData.day);
         setRemainder(onEditData.remainder);
-     }
-    },[onEditData])
+      }
+     
+    if(!iseditTask){
+      setText('');
+      setDay('');
+      setRemainder(false)
+
+    }
+
+    },[onEditData,iseditTask])
+
   return (
-    <div>
+    <div className={!isAddClose ? "form" :""}>
       <form onSubmit={onsubmit} className="form-control">
         <div className="form-input">
             <label>Task</label>