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

    Todo: Add a Task

    Challenge workspace

    15-20 min
    Lists and formsPath 2/33
    ListsFormsState & events

    Suggested first

    Counter Card

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

    Todo: Add a Task

    Focus on one responsibility: turn controlled input into a new item in state.

    IDs already provided

    • todo-form is the form to submit.
    • todo-input is the controlled task field.
    • add-todo is the submit button.
    • todo-list contains added tasks and empty-state appears before any exist.

    Requirements

    • Read the text from the existing controlled input.
    • Trim it and do not add blank tasks.
    • Add a new item without mutating the current array.
    • Clear the input only after a task is added.

    Hints

    • Handle the form submit event and prevent its default behavior.
    • text.trim() returns a copy without leading or trailing spaces.