Todo entry form

Write a controlled form to add a new todo.

Todo entry form

In this lesson we'll write the TodoForm component. It will contain an <input> and a <button>Add</button>. The text state is bound to the input via value and onChange.

On button click, a new todo is added with setTodos: { '{ id: Date.now(), text, done: false }' }. Then the input is cleared with setText("").

This pattern is known as a controlled component: the input value lives in React state, updated on every keystroke.

Add logic

On button click, setTodos is called. The new array is the old one with a new todo appended: setTodos(prev => [...prev, { '{ id: Date.now(), text, done: false }' }]).

This is called functional update and safely accesses the latest state. The old todos stay intact while a new array is built; React detects the change and renders the list.

After adding, the input is cleared with setText(""). So the user can add multiple todos in a row.

Exercise Write TodoForm

Complete the skeleton. Write a TodoForm component. Take ({ '{ text, setText, onAdd }' }) as parameter. Inside <form onSubmit={ '{ ... }' }>, show <input value={ '{ text }' } onChange={ '{ e => setText(e.target.value) }' } placeholder="Task" /> and <button>Add</button>. onSubmit should call e.preventDefault() then onAdd(). Export it.

Show example solution

function TodoForm({ text, setText, onAdd }) {
  return (
    <form onSubmit={(e) => { e.preventDefault(); onAdd(); }}>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Task" />
      <button>Add</button>
    </form>
  );
}

export default TodoForm;

Test yourself

What is a controlled input?
- Input works without state
- Input isn't rendered
- Input is read-only
- Input value lives in state
Show answer

Input value lives in state — A controlled input takes its value from state.

New todo id

To generate an id for a new todo, use ____.

Show answer

To generate an id for a new todo, use Date.now().

Match the form parts

input

Takes text
value={text}

Binding
onChange

Captures typing
button

Adds

Next lesson: Todo list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies