id} todo={todo} /> // Render filtered todos ))} ); } export default Todos;3c:T6e1,import React, { useState, useEffect } from 'react'; import { List, CircularProgress, TextField } from '@mui/material'; import TodoItem from './TodoItem'; function Todos() { const [todos, setTodos] = useState([]); // State to store the list of todos const [loading, setLoading] = useState(true); // State to manage loading status const [error, setError] = useState(null); // State to handle errors const [search, setSearch] = useState(''); // State to store the search term useEffect(() => { const fetchTodos = async () => { try { // Fetch todos with search query parameter const response = await fetch(`/api/todos?search=${encodeURIComponent(search)}`); if (!response.ok) { throw new Error('Network response was not ok'); // Handle network errors } const data = await response.json(); // Parse JSON response setTodos(data); // Set the fetched todos to state } catch (error) { setError(error); // Set error if fetching fails } finally { setLoading(false); // Set loading to false after fetching } }; fetchTodos(); // Call the fetch function whenever search term changes }, [search]); if (loading) { return ; // Show loading indicator } if (error) { return

Error: {error.message}

; // Show error message } return (

Todo List

setSearch(e.target.value)} // Update search term on input change /> {todos.map((todo) => ( // Render todos ))}

); } export default Todos;