React Todo List Tutorial for Beginners (Step by Step)

Want to build a React todo list but not sure where to start? This guide shows you how, step by step. A todo list is the classic first React project because it uses the three ideas every React app needs: state (data that changes), a form (to add things), and a list (to show things). You need no experience beyond basic JavaScript.

By the end you will have a small app that can add tasks, mark them done, and delete them. Every code block is short, and each one is explained line by line right after it.

What you will build

Your app will have an input box, an Add button, and a list of tasks. Each task will have a checkbox to mark it done and a Delete button. Here is the plan:

1. Create a React project.
2. Store the list of tasks in state.
3. Show the tasks on the page.
4. Add new tasks with a form.
5. Mark tasks as done.
6. Delete tasks.

Step 1: Set up a React project

You need Node.js installed (download it from nodejs.org). Then open a terminal and run these commands. Vite is a free tool that creates a ready-to-use React project for you.

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm run dev

The first command creates a folder called todo-app. The second moves into it. The third downloads the code the project needs. The fourth starts a local server, and the terminal prints a link such as http://localhost:5173. Open it in your browser to see your app.

Now open the file src/App.jsx and delete everything inside it. We will write our own code there.

Step 2: Store tasks in state

State is data that a component remembers. When state changes, React redraws the page for you. We use the useState hook to create it. A hook is a special React function that starts with the word use.

import { useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Learn React', done: false },
    { id: 2, text: 'Build a todo app', done: false },
  ]);

  return <h1>My Todo List</h1>;
}

export default App;

Line 1 imports useState from React. Line 4 creates a state variable called tasks and a function called setTasks that changes it. The value inside useState( ) is the starting value: an array of two task objects. Each task has an id (a unique number), a text, and a done flag that says if it is finished. Line 9 returns what to show on screen. For more on this hook, see the useState guide linked below.

Step 3: Show the list on the page

To display every task, we use the array method map(). It turns each item in the array into a piece of screen. Each item also needs a key prop, a unique value that helps React keep track of the items.

return (
  <div>
    <h1>My Todo List</h1>
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  </div>
);

Replace the old return line with this. The curly braces { } let us write JavaScript inside the markup. tasks.map goes through the array one task at a time. For each task, we make an <li> (a list item) showing task.text. The key={task.id} gives each item its own unique label. You should now see your two tasks in the browser.

Step 4: Add new tasks with a form

We need a second piece of state to hold what the user is typing. Then we need a function that adds a new task when the form is sent.

const [newTask, setNewTask] = useState('');

function handleSubmit(event) {
  event.preventDefault();
  if (newTask.trim() === '') return;
  const task = { id: Date.now(), text: newTask, done: false };
  setTasks([...tasks, task]);
  setNewTask('');
}

Put this code above the return line. newTask stores the current text of the input and starts empty. handleSubmit runs when the form is sent. event.preventDefault() stops the browser from reloading the page. The if line stops empty tasks (trim removes spaces at the ends). Date.now() gives a number that is different each time, so we use it as the id. [...tasks, task] builds a new array with all the old tasks plus the new one. We never change state directly; we always give React a new copy. Last, setNewTask('') clears the input.

Now add the form in the markup, just under the <h1>:

<form onSubmit={handleSubmit}>
  <input
    value={newTask}
    onChange={(e) => setNewTask(e.target.value)}
    placeholder="Add a task"
  />
  <button type="submit">Add</button>
</form>

onSubmit tells React to run handleSubmit when the form is sent. The input's value always comes from state, and onChange updates the state each time a key is typed. This pattern is called a controlled input. Type a task and press Add: it appears in the list.

Step 5: Mark tasks as done

To toggle a task, we make a new array where the clicked task has its done value flipped.

function toggleTask(id) {
  setTasks(
    tasks.map((task) =>
      task.id === id ? { ...task, done: !task.done } : task
    )
  );
}

toggleTask receives the id of the task that was clicked. We map over all tasks. If the task's id matches, we return a copy of it ({ ...task }) with done set to the opposite value (! means not). If it does not match, we return the task unchanged. Then setTasks saves the new array.

Now update the <li> so it shows a checkbox and a line through finished tasks:

<li key={task.id}>
  <input
    type="checkbox"
    checked={task.done}
    onChange={() => toggleTask(task.id)}
  />
  <span style={{ textDecoration: task.done ? 'line-through' : 'none' }}>
    {task.text}
  </span>
</li>

The checkbox is checked when task.done is true. When clicked, it calls toggleTask with this task's id. The span shows the text, and the style uses a ternary (a short if/else) to add a line through the text when the task is done.

Step 6: Delete tasks

Deleting means keeping every task except the one we want to remove. The array method filter() does exactly that.

function deleteTask(id) {
  setTasks(tasks.filter((task) => task.id !== id));
}

filter() keeps only the tasks where the test is true. Here the test is task.id !== id, so every task stays except the one with the matching id. Add a button inside the <li>, after the span:

<button onClick={() => deleteTask(task.id)}>Delete</button>

Clicking the button runs deleteTask for that task. The task disappears from the list right away, because state changed and React redrew the page.

The ideas you just used

Common beginner mistakes

• Changing state directly, such as tasks.push(task). Always use the setter function with a new array.
• Forgetting the key prop on list items, which causes a warning in the console.
• Forgetting event.preventDefault() in the form handler, which reloads the page and wipes your state.
• Using the array index as the key. Use a unique id instead, so items stay correct when the list changes.

Where to go next

You can improve this app in many ways. Try adding an Edit button, a counter that shows how many tasks are left, or saving the tasks in the browser using localStorage. Each one teaches you something new while using the same basics.