1.6

road-toreact-project/src/AddTodoForm.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+
+function AddToForm({addTo}) {
+  const [todoTitle, setTodoTitle] = useState('');
+
+  // Function to handle changes in the input field
+  const handleTitleChange = (event) => {
+    const newTodoTitle = event.target.value;
+    setTodoTitle(newTodoTitle);
+  }
+
+  // Function to handle adding a new todo
+  const handleAddTodo = (event) => {
+    event.preventDefault();
+
+    const newTodo = {
+      title: todoTitle,
+      id: Date.now(), // Placeholder for generating a unique identifier
+    };
+
+    addTo.onAddTodo(newTodo);
+
+    // Clear the todoTitle state by setting it to an empty string
+    setTodoTitle('');
+  }
+
+  return (
+    <form onSubmit={handleAddTodo}>
+      <label htmlFor="todoTitle">Title</label>
+      <input
+        type="text"
+        name="title"
+        id="todoTitle"
+        onChange={handleTitleChange}
+        value={todoTitle}
+      />
+      <button type="submit">Add</button>
+    </form>
+  );
+}
+
+export default AddToForm;

road-toreact-project/src/App.js

@@ -1,25 +1,38 @@
-import logo from './logo.svg';
-import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import * as React from 'react';
+import ToDoList from './TodoList';
+import AddToForm  from './AddTodoForm';
+import { useState } from "react";
+import { useEffect } from 'react';
+
+const useSemiPersistentState = (initialTodoList) => {
+  const [todoList, setTodoList] = useState(initialTodoList);
+
+  useEffect(() => {
+    localStorage.setItem('savedTodoList', JSON.stringify(todoList));
+  }, [todoList]);
+
+  return [todoList, setTodoList];
+};
+function App(){
+  const initialTodoList = JSON.parse(localStorage.getItem('savedTodoList')) || [];
+  const[todoList,setTodoList] = useSemiPersistentState(initialTodoList)
+  const addTodo = (newTodo) => {
+    console.log("This is newTodo",newTodo)
+    setTodoList(currTodoList => [...currTodoList,newTodo])
+  }
+
+
+return (
+  <>
+  <div>
+    <h1>ToDoList</h1>
+    <AddToForm addTo={{ onAddTodo: addTodo }} />
+    <ToDoList todoList={todoList} />
+  </div>
+  </>
+);
+
 }
 
 export default App;

road-toreact-project/src/TodoList.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ToDoListItem from "./TodoListItem";
+function ToDoList({todoList}){
+
+    return(
+      <ul>
+  {todoList.map(function(todo) {
+    return <ToDoListItem key={todo.id} todo={todo} />;
+  })}
+</ul>
+
+    )
+}
+export default ToDoList;

road-toreact-project/src/TodoListItem.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+const ToDoListItem = (props) => {
+
+  return <li>{props.todo.title}</li>;
+};
+
+export default ToDoListItem;