Tried My Best Sir❤

.eslintrc.json

@@ -4,16 +4,15 @@
     "es2021": true,
     "jest": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:prettier/recommended"
-  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
   "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
   "plugins": ["react"],
-  "rules": { "react/react-in-jsx-scope": "off" }
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
 }

src/App.js

@@ -21,12 +21,14 @@ const App = () => {
   const [todos, setTodos] = useState(todosData);
 
   // get the newTodo from NewTodo.js here inside this function
-  const handleAddTodo = () => {};
+  const handleAddTodo = (newTodo) => {
+    setTodos((oldTodos) => [...oldTodos, newTodo]);
+  };
 
   return (
     <div>
-      <NewTodo />
-      <Todos />
+      <NewTodo onHandleAddTodo={handleAddTodo} />
+      <Todos todos={todos} />
     </div>
   );
 };

src/components/NewTodo.js

@@ -3,17 +3,33 @@ import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 
 const NewTodo = (props) => {
-  const [todo, setTodo] = useState();
+  const [todo, setTodo] = useState({ title: '', desc: '' });
 
   // for handling todo state changes
-  const handleChange = (e) => {};
+  const handleChange = (e) => {
+    if (e.target.name === 'title') {
+      setTodo((oldTodo) => ({
+        title: e.target.value,
+        desc: oldTodo.desc
+      }));
+    }
+    if (e.target.name === 'desc') {
+      setTodo((oldTodo) => ({
+        title: oldTodo.title,
+        desc: e.target.value
+      }));
+    }
+  };
 
   // submit the form and send newTodo in App.js
   const handleSubmit = (e) => {
     e.preventDefault();
     const newTodo = {
-      id: uuidv4()
+      id: uuidv4(),
+      title: todo.title,
+      desc: todo.desc
     };
+    props.onHandleAddTodo(newTodo);
 
     // for reset todo state
     setTodo({

src/index.css

@@ -108,4 +108,3 @@ form {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
 }
-