Welcome back! In the previous lesson, you learned how to implement routing in your React application using React Router. Now, it's time to enhance your Todo App by adding the ability to create and delete todo items. These features are essential for any todo application, as they allow users to manage tasks they need to complete. In this lesson, you'll learn how to create a form for collecting todo details, saving new todos to your list, and implementing a delete function to remove todos.

In this lesson, you'll discover how to build a form that allows users to input new todo items and how to implement a delete button to remove items. You'll learn how to handle form submissions, update the todo list with new items, and delete existing items. Here's a glimpse of what you'll be working with:

In the CreateTodo component, we use the useState hook to manage the state of the input field. The useState hook is a fundamental part of React that allows you to add state to functional components. Here's a breakdown of how it works in our component:

• useState(''): This initializes the state with an empty string. The useState function returns an array with two elements: the current state value (title) and a function to update it (setTitle).

• title: This is the current state value, representing the text input by the user.

• setTitle: This is the function used to update the state. Whenever the input field changes, setTitle is called with the new value, updating the title state.

By using useState, we can keep track of the input field's value and ensure that the component re-renders whenever the state changes, providing a responsive and interactive user experience.

Note that directly modifying a variable won't trigger a re-render, leading to a stale or unresponsive UI, since in React, components re-render when their state or props change. When you use setState, React knows to re-render the component with the updated state, ensuring the UI reflects the latest data.

To implement the delete functionality, you'll need to add a delete button in the TodoDetails component and a function in the TodoService to handle the deletion:

Note that in the provided TodoService.js implementation, there is no useState or setTodos, so normally, React would not detect changes to the todos array. However, the reason it still works is that components retrieve the todos directly from TodoService.js on every render, so React indirectly gets the updated list.

Here, every time the Todos component re-renders, it calls getTodos(), which always reflects the updated todos array. When Todos.jsx re-renders, it fetches the latest todos array, making it appear like React automatically updates the UI. Since todos is stored in TodoService.js, it acts like a global variable shared across components. When todos.push(newTodo) modifies the array, any component that re-fetches getTodos() will see the updated data.

However, if you want to manage the state in the Todos component itself, you would typically use useState to manage the todos array. Here's how you might do that:

The course setup avoids using local state (useState) and instead relies on fetching getTodos() every time a component renders. This works in simple examples but is not ideal for larger applications since React does not efficiently track changes in globally stored arrays.

Additionally, here's how the new route will look in your main application file:

Adding and deleting todo items are fundamental features of any todo application. They allow users to manage tasks they need to complete, making the application more useful and interactive. By learning how to create, manage, and delete todo items, you'll enhance your ability to build dynamic and user-friendly applications. This skill is crucial for any developer looking to create applications that meet user needs and provide a seamless experience.