header and todoform corrections

src/App.js

@@ -29,24 +29,18 @@ function App() {
     }
   ]
 
-  // const [todos, setTodos] = useState([]);
+
   // const [editId, setEdit] = useState(false);
   // const [inputValue, setInputValue] = useState("");
 
-  // const handleEditChange = (id, text) => {
-  //   setEdit(id);
-  //   setInputValue(text);
-  // };
+  const onEdit = (id, text) => {
+    console.log(id, text)
+  };
+
+  const onComplete = (id, text) => {
+    console.log(id, text)
+  }
 
-  // const addTodo = (todo) => {
-  //   if (!todo.text || /^\s*$/.test(todo.text)) {
-  //     alert('Please add a Todo')
-  //     return;
-  //   }
-  //   const newTodos = [todo, ...todoData];
-  //   setTodos(newTodos);
-  //   console.log(newTodos);
-  // };
 
   // const removeTodo = (id) => {
   //   const removedArr = [...todos].filter((todoId) => todoId.id !== id);
@@ -93,11 +87,11 @@ function App() {
     <>
       <div className='task-main'>
 
-        <Header count={todoData} />
+        <Header count={todoData.length} />
 
-        {/* {todoData.map((todos) => (
-          <TodoItem key={todos.id} children={todos.text} complete={todos.isComplete}/>
-        ))} */}
+        {todoData.map((todos) => (
+          <TodoItem key={todos.id} todoId={todos.id} complete={todos.isComplete} onEdit={onEdit} onComplete={onComplete}>{todos.text}</TodoItem>
+        ))}
 
         {/* <Todos todos={todos}
           completeTodo={completeTodo}

src/components/Header.js

@@ -3,7 +3,7 @@ import React from 'react';
 const Header = ({ count }) => {
     return (
         <div className='App'>
-            <div className='task-head'><b>You have {count.length > 0 ? count.length : 'No'} {count.length <= 1 ? 'Todo' : 'Todos'}</b></div>
+            <div className='task-head'><b>You have {count > 0 ? count : 'No'} {count <= 1 ? 'Todo' : 'Todos'}</b></div>
         </div>
     )
 }

src/components/TodoForm.js

 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 
-function TodoForm(props) {
+function TodoForm() {
+
   const [input, setInput] = useState('');
+  const [todos, setTodos] = useState([]);
 
   const onChange = (e) => {
     setInput(e.target.value);
   };
 
+  const addTodo = (todo) => {
+    if (!todo.text || /^\s*$/.test(todo.text)) {
+      alert('Please add a Todo')
+      return;
+    }
+    const newTodos = [todo, ...todos];
+    setTodos(newTodos);
+    console.log('newTodos =>', newTodos);
+  };
+
   const Submit = (e) => {
     e.preventDefault();
-    props.onSubmit({
+    addTodo({
       id: Math.floor(Math.random() * 10000),
       text: input,
       isEdit: false,
@@ -29,9 +41,7 @@ function TodoForm(props) {
             onChange={onChange}
           />
         </div>
-        <button className='btn' onClick={Submit}>
-          Submit
-        </button>
+        <button className='btn'>Submit</button>
       </div>
     </form>
   );

src/components/TodoItem.js

 import React from 'react'
 
-const TodoItem = ({ children, complete }) => {
+const TodoItem = ({ todoId, children, complete, onEdit, onComplete }) => {
 
   const className = `todos ${complete ? 't-complete' : ''}`
 
@@ -8,8 +8,8 @@ const TodoItem = ({ children, complete }) => {
     <div className="task">
       <div className="task-body-content">
         <div style={{ display: 'flex' }}>
-          <input type='checkbox' defaultChecked={complete}></input>
-          <span style={{ cursor: 'pointer' }} className={className}>{children}</span>
+          <input type='checkbox' defaultChecked={complete} onChange={() => onComplete(todoId, complete)}></input>
+          <span style={{ cursor: 'pointer' }} className={className} onClick={() => onEdit(todoId, children)}>{children}</span>
         </div>
       </div>
     </div >

src/index.css

@@ -23,7 +23,7 @@ body {
 .add-form {
   display: flex;
   justify-content: space-between;
-  margin: 10px 10px 10px 5px;
+  margin: 30px 10px 10px 5px;
 }
 
 .form-control input {
@@ -58,11 +58,9 @@ body {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
-  padding: 5px 12px;
-}
-.task-body-content:last-child{
-  border: none;
+  padding: 5px 6px;
 }
+
 .t-complete {
   text-decoration: line-through;
 }
\ No newline at end of file