-
- );
+ // State to store all todo sections (each with a heading and associated lists)
+ const [todos, setTodos] = useState([]);
+ // State to manage the current heading input
+ const [headingInput, setHeadingInput] = useState('');
+ // State to manage each input field for the nested list items by heading index
+ const [listInputs, setListInputs] = useState({});
+ // Function to add a new todo heading (if input is not empty)
+ const handleAddTodo = () => {
+ if (headingInput.trim() !== '') {
+ // Append new todo with empty list array
+ setTodos([...todos, { heading: headingInput, lists: [] }]);
+ setHeadingInput(''); // Clear the input field
+ }
+ };
+ // Function to delete a todo section based on index
+ const handleDeleteTodo = (index) => {
+ const newTodos = [...todos]; // Create a copy of current todos
+ newTodos.splice(index, 1); // Remove the selected heading
+ setTodos(newTodos); // Update state with modified list
+ };
+ // Function to add a new list item under a specific heading
+ const handleAddList = (index) => {
+ if (listInputs[index] && listInputs[index].trim() !== '') {
+ const newTodos = [...todos]; // Copy current todos
+ newTodos[index].lists.push(listInputs[index]); // Add list to the right section
+ setTodos(newTodos); // Update state
+ setListInputs({ ...listInputs, [index]: '' }); // Clear list input for that section
+ }
+ };
+ // Function to handle change in list input field for a specific section
+ const handleListInputChange = (index, value) => {
+ setListInputs({ ...listInputs, [index]: value }); // Track input for each heading index
+ };
+ return (
+ <>
+ {/* Input section to add a new heading */}
+