Skip to main content
Problem 28

Todo App with API Persistence

MEDIUMBUILD
React+4

Build the UI for a todo app whose data lives in a backend. You're given three async props that stand in for the API: loadTodos() returns the current list, addTodo(text) creates a todo on the server and returns it, deleteTodo(id) removes it.

Your job is to wire the React component to those calls so the UI always reflects what the server says — load the list on mount, append after a successful add, remove after a successful delete.

Requirements
  • Keep App as the default exported React component with the provided loadTodos, addTodo, and deleteTodo props.
  • Call loadTodos() exactly once on mount and render each returned todo inside a list with data-testid="todo-list".
  • Render each todo as an element with data-testid="todo-item" showing the todo's text.
  • Render an input with data-testid="todo-input" and an data-testid="add-button" button for creating new todos.
  • When the add button is clicked with non-empty input, call addTodo(text) once with the trimmed text and append the resolved todo to the list.
  • Each todo item must contain a data-testid="delete-button" button. Clicking it calls deleteTodo(todo.id) and removes that todo from the list once the call resolves.
Examples
Example 1
Input
loadTodos() resolves with [{ id: 1, text: 'Buy milk' }, { id: 2, text: 'Walk dog' }]
Output
Two todo-item elements are rendered: 'Buy milk' and 'Walk dog'
Example 2
Input
User types 'Pay rent' and clicks add. addTodo('Pay rent') resolves with { id: 3, text: 'Pay rent' }
Output
A third todo-item with 'Pay rent' appears in the list
Constraints
  • loadTodos must be called at most once per mount.
  • addTodo must not be called with an empty string.
  • The UI must not append a new todo before addTodo resolves — wait for the server to confirm the id.
Follow-up

How would you handle a failed `addTodo` — show an inline error, retry, or roll back optimistically?

Hints
Related Practice
Track
Full Stack

Keep moving through related full stack problems and build a stronger search-friendly practice loop around this topic.

View track →
Console output will appear here...