react create resource

src/App.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -21,12 +22,16 @@ const App = () => {
   const [todos, setTodos] = useState(todosData);
 
   // get the newTodo from NewTodo.js here inside this function
-  const handleAddTodo = () => {};
-
+  const handleAddTodo = (newTodo) => {
+    setTodos((oldTodo)=>{
+      const newTodos=[...oldTodo, (newTodo)]
+      return newTodos
+    })
+  };
   return (
     <div>
-      <NewTodo />
-      <Todos />
+      <NewTodo getTodo={handleAddTodo} />
+      <Todos todos={todos} />
     </div>
   );
 };

src/components/NewTodo.js

@@ -1,20 +1,30 @@
+/* eslint-disable */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 
 const NewTodo = (props) => {
-  const [todo, setTodo] = useState();
-
+  const [todo, setTodo] = useState({ title: '', desc: '' });
+  const { title, desc } = todo;
   // for handling todo state changes
-  const handleChange = (e) => {};
+  const handleChange = (e) => {
+    const name = e.target.name;
+    const value = e.target.value;
+    setTodo({
+      ...todo,
+      [name]: value
+    });
+  };
 
   // submit the form and send newTodo in App.js
   const handleSubmit = (e) => {
     e.preventDefault();
     const newTodo = {
-      id: uuidv4()
+      id: uuidv4(),
+      title: title,
+      desc: desc
     };
-
+    props.getTodo(newTodo);
     // for reset todo state
     setTodo({
       title: '',
@@ -33,7 +43,7 @@ const NewTodo = (props) => {
               type="text"
               name="title"
               id="title"
-              value={todo.title}
+              value={title}
               onChange={handleChange}
               required
             />
@@ -44,7 +54,7 @@ const NewTodo = (props) => {
             <textarea
               name="desc"
               id="desc"
-              value={todo.desc}
+              value={desc}
               onChange={handleChange}
               required></textarea>
           </div>

src/components/Todo.js

@@ -1,8 +1,9 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const Todo = (props) => {
-  const { title, desc } = props.todo;
+  const { title, desc } = props.todo; 
   return (
     <article className="todo">
       <h3 className="todo__title">{title}</h3>

src/components/Todos.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
 

src/index.css

@@ -59,6 +59,7 @@ textarea {
   border-radius: 0.6rem;
   width: 25rem;
   max-width: 100%;
+  margin: 0 auto;
 }
 
 form {

src/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';