Added an edit task feature where you can edit the text and date

src/App.js

@@ -5,7 +5,7 @@ import Footer from './components/Footer'
 import Tasks from './components/Tasks'
 import AddTask from './components/AddTask'
 import About from './components/About'
-
+ 
 const App = () => {
   const [showAddTask, setShowAddTask] = useState(false)
   const [tasks, setTasks] = useState([])
@@ -86,6 +86,9 @@ const App = () => {
       )
     )
   }
+  const edit=(id,text,date)=>{
+    setTasks(tasks.map((task)=>task.id===id?{...task,text:text,date:date}:task));
+   }
 
   return (
     <Router>
@@ -105,6 +108,7 @@ const App = () => {
                   tasks={tasks}
                   onDelete={deleteTask}
                   onToggle={toggleReminder}
+                  edit={edit}
                 />
               ) : (
                 'No Tasks To Show'

src/components/Task.js

@@ -1,19 +1,40 @@
-import { FaTimes } from 'react-icons/fa'
+import { useState } from 'react'
+import { FaTimes,FaCheckCircle,FaPen} from 'react-icons/fa'
 
-const Task = ({ task, onDelete, onToggle }) => {
+const Task = ({ task, onDelete, onToggle,edit}) => {
+  const [showDiv,setShowDiv]=useState(false);
+  const [text,setText]=useState('');
+  const [date,setDate]=useState('');
+
+
+  const show=()=>{
+      setShowDiv(!showDiv);
+      setText(task.text);
+      setDate(task.date);
+  }
+  const save=(id)=>{
+      setShowDiv(!showDiv);
+      edit(id,text,date);
+  }
   return (
     <div
       className={`task ${task.reminder ? 'reminder' : ''}`}
       onDoubleClick={() => onToggle(task.id)}
     >
-      <h3>
-        {task.text}{' '}
+      <h3> 
+      {showDiv?<input type='text' className='text-line' value={text}
+       onChange={(e)=>setText(e.target.value)} />: <p>{task.text}</p> }
         <FaTimes
           style={{ color: 'red', cursor: 'pointer' }}
           onClick={() => onDelete(task.id)}
         />
       </h3>
-      <p>{task.day}</p>
+      <p>
+          {showDiv?<input type='text' className='text-line' value={date} 
+          onChange={(e)=>setDate(e.target.value)} />: <label>{task.date}</label> }
+          {showDiv?<FaCheckCircle style={{color:'green',cursor:'pointer'}} 
+          onClick={()=>save(task.id)}/>:<FaPen style={{color:'green',cursor:'pointer'}} onClick={show} />}
+      </p>
     </div>
   )
 }

src/components/Tasks.js

@@ -1,13 +1,13 @@
 import Task from './Task'
 
-const Tasks = ({ tasks, onDelete, onToggle }) => {
+const Tasks = ({ tasks, onDelete, onToggle,edit }) => {
   return (
     <>
       {tasks.map((task, index) => (
-        <Task key={index} task={task} onDelete={onDelete} onToggle={onToggle} />
+        <Task key={index} task={task} onDelete={onDelete} onToggle={onToggle} edit={edit} />
       ))}
     </>
   )
 }
-
+ 
 export default Tasks

src/index.css

@@ -4,7 +4,7 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-}
+} 
 
 body {
   font-family: 'Poppins', sans-serif;
@@ -105,7 +105,16 @@ body {
   flex: 2;
   height: 20px;
 }
+.text-line {
+  background-color: transparent;
+  outline: none;
+  outline-style: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
 
+  padding: 3px 10px;
+}
 footer {
   margin-top: 30px;
   text-align: center;