Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Simple Todo List

    Challenge workspace

    25-35 min
    Lists and formsPath 12/33
    ListsFormsState & eventsConditional rendering

    Suggested first

    Todo: Add a TaskTodo: Toggle a TaskTodo: Remove a Task

    Your workspace must pass its server-side browser checks to complete this challenge.

    Simple Todo List

    Bring the add, toggle, and remove patterns together in one task list.

    IDs already provided

    • todo-form, todo-input, and add-todo make up the add-task controls.
    • todo-list contains tasks, and empty-state is shown when it has none.
    • Each task row and its controls use its stable item ID: todo-${todo.id}, toggle-${todo.id}, and remove-${todo.id}.

    Requirements

    • Connect the supplied form to add trimmed, non-empty tasks.
    • Clear the input after a successful addition.
    • Toggle completion without mutating a task object.
    • Remove tasks by stable ID.
    • Display an empty state when appropriate.