**Build a Simple To-Do List Application Managing State with the useState Hook (Lab Topic)** **Objective:** By the end of this lab, you will have built a simple to-do list application that manages state using the `useState` hook. This lab will reinforce your understanding of state management in React and help you apply it to a real-world scenario. **Prerequisites:** You have completed the previous topics in the State Management in React section, specifically the topics on understanding state, using the `useState` hook for managing local component state, and lifting state up to share data between components. **Step 1: Setting Up the Project** Create a new React app using the Create React App tool by running the following command in your terminal: ```bash npx create-react-app todo-list-app ``` Navigate into the newly created project directory: ```bash cd todo-list-app ``` Install the required dependencies: ```bash npm install ``` **Step 2: Understanding the To-Do List Application Requirements** The simple to-do list application will have the following features: 1. A text input field to add new tasks 2. A list of tasks that are displayed in a `ul` element 3. Each task can be marked as completed by toggling the `checked` property 4. When a task is completed, it is removed from the list **Step 3: Creating the To-Do List Component** Create a new file called `TodoList.js` in the `src` directory: ```javascript import React, { useState } from "react"; const TodoList = () => { // Define the initial state for the to-do list const [tasks, setTasks] = useState([ { id: 1, text: "Task 1", completed: false }, { id: 2, text: "Task 2", completed: false }, { id: 3, text: "Task 3", completed: false }, ]); // Function to add new tasks to the list const addTask = (text) => { setTasks([...tasks, { id: tasks.length + 1, text, completed: false }]); }; // Function to toggle the completed state of a task const toggleTask = (id) => { setTasks( tasks.map((task) => task.id === id ? { ...task, completed: !task.completed } : task ) ); }; // Function to remove a completed task from the list const removeTask = (id) => { setTasks(tasks.filter((task) => task.id !== id)); }; return ( <div> <h1>To-Do List</h1> <input type="text" onChange={(e) => addTask(e.target.value)} /> <ul> {tasks.map((task) => ( <li key={task.id}> {task.text} <button onClick={() => toggleTask(task.id)}>Toggle Completed</button> <button onClick={() => removeTask(task.id)}>Remove</button> </li> ))} </ul> </div> ); }; export default TodoList; ``` **Step 4: Connecting the To-Do List Component to the App** Open the `App.js` file and replace its content with the following code: ```javascript import React from "react"; import TodoList from "./TodoList"; function App() { return ( <div> <TodoList /> </div> ); } export default App; ``` **Step 5: Running the Application** Start the development server: ```bash npm start ``` Open your web browser and navigate to `http://localhost:3000`. You should see the simple to-do list application. **Practical Takeaways:** * The `useState` hook is used to manage the state of the to-do list, which is an array of objects representing tasks. * The `addTask` function updates the state by adding a new task to the end of the array. * The `toggleTask` function updates the state by toggling the `completed` property of a task. * The `removeTask` function updates the state by filtering out a task from the array. * The `key` property is used to uniquely identify each task and prevent React from throwing an error when rendering multiple tasks. **Key Concepts:** * State management in React using the `useState` hook * Updating state by adding, removing, and modifying elements * Handling events and updating state in response to user input **Discussion:** Please leave a comment or ask for help if you have any questions or need further clarification on any of the concepts demonstrated in this lab topic. In the next topic, we will explore the use of React hooks for managing effects, which allows us to perform side effects such as handling API requests, working with external dependencies, and managing the browser's window and document objects. Note: This lab topic is based on the official React documentation and following best practices for building modular and scalable applications.