Q1. How would you structure a Todo app in React?
A Todo app typically has components: App (main), TodoList, TodoItem, AddTodo. State management can be useState or useReducer. It includes features like add, toggle, delete, and filter todos.
Q2. How do you manage state in a Todo app?
You can use useState with an array of todos. Each todo has id, text, completed. Functions like addTodo, toggleTodo, deleteTodo update the state. For larger apps, useReducer or Redux can be used.
Q3. How do you handle form input in a Todo app?
Use a controlled component with useState for the input field. On submit, add the new todo and clear the input. Validate empty input.
Q4. How do you implement filtering (All, Active, Completed)?
Maintain a filter state. Derive the displayed todos by filtering the main list based on the filter. Use conditional rendering to show appropriate buttons.
Q5. How can you persist todos?
Use localStorage to save todos. On initial load, read from localStorage. In useEffect, update localStorage whenever todos change.