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
It includes features like add, toggle, delete, and filter todos.
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
Each todo has
Functions like
For larger apps,
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
On submit, add the new todo and clear the input.
Validate empty input.
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.
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
On initial load, read from
In
localStorage to save todos.On initial load, read from
localStorage.In
useEffect, update localStorage whenever todos change.