edit and corrections added

src/App.js

@@ -41,6 +41,9 @@ function App() {
     console.log(id, text)
   }
 
+  const onClick = (id, value) => {
+    console.log(id, value)
+  }
 
   // const removeTodo = (id) => {
   //   const removedArr = [...todos].filter((todoId) => todoId.id !== id);
@@ -90,7 +93,7 @@ function App() {
         <Header count={todoData.length} />
 
         {todoData.map((todos) => (
-          <TodoItem key={todos.id} todoId={todos.id} complete={todos.isComplete} onEdit={onEdit} onComplete={onComplete}>{todos.text}</TodoItem>
+          <TodoItem key={todos.id} id={todos.id} complete={todos.isComplete} onEdit={onEdit} edit={todos.isEdit} onComplete={onComplete} onClick={onClick}>{todos.text}</TodoItem>
         ))}
 
         {/* <Todos todos={todos}

src/components/TodoForm.js

-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
 function TodoForm() {
@@ -48,7 +47,3 @@ function TodoForm() {
 }
 
 export default TodoForm;
-
-TodoForm.propTypes = {
-  onSubmit: PropTypes.func,
-};

src/components/TodoItem.js

 import React from 'react'
 
-const TodoItem = ({ todoId, children, complete, onEdit, onComplete }) => {
+const TodoItem = ({ id, children, edit, complete, onEdit, onComplete, onClick }) => {
 
   const className = `todos ${complete ? 't-complete' : ''}`
 
   return (
     <div className="task">
       <div className="task-body-content">
-        <div style={{ display: 'flex' }}>
-          <input type='checkbox' defaultChecked={complete} onChange={() => onComplete(todoId, complete)}></input>
-          <span style={{ cursor: 'pointer' }} className={className} onClick={() => onEdit(todoId, children)}>{children}</span>
-        </div>
+        {!edit ? (
+          <div style={{ display: 'flex' }}>
+            <input type='checkbox' checked={complete} onChange={(e) => onComplete(id, e.target.checked)}></input>
+            <span style={{ cursor: 'pointer' }} className={className} onClick={() => onClick(id, children)}>{children}</span>
+          </div>
+        ) :
+          <form>
+            <div className='add-form'>
+              <div className='form-control'>
+                <input type='input' defaultValue={children} onChange={(e) => onEdit(id, e.target.value)}
+                />
+              </div>
+              <button type='button' className='btn'>Save</button>
+            </div>
+          </form>
+        }
       </div>
-    </div >
+    </div>
   )
 }
 

src/index.css

@@ -11,7 +11,7 @@ body {
   color: #000;
   border: 1px solid #ccc;
   padding: 10px 12px;
-  margin: 5px;
+  margin: 5px 12px;
   border-radius: 5px;
   cursor: pointer;
   text-decoration: none;
@@ -23,7 +23,7 @@ body {
 .add-form {
   display: flex;
   justify-content: space-between;
-  margin: 30px 10px 10px 5px;
+  margin: 10px 10px 10px 5px;
 }
 
 .form-control input {
@@ -51,14 +51,14 @@ body {
   padding: 10px;
   text-align: center;
   box-shadow: 1px 3px 1px #18181812;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
 
 .task-body-content {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
-  padding: 5px 6px;
+  padding: 4px 6px;
 }
 
 .t-complete {