Tutorials › React Modern Development › Real Project: Todo App

Real Project: Todo App

8 min read Quiz at the end

Build a Todo app: manage tasks in useState, render with .map() and a key prop, add on form submit, toggle done on click, and delete with .filter(). Save to localStorage in useEffect. Covers most core React patterns.

Todo App with React

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = () => {
    if (!input.trim()) return;
    setTodos(prev => [...prev, { id: Date.now(), text: input, done: false }]);
    setInput("");
  };

  const toggle = (id) =>
    setTodos(prev => prev.map(t => t.id===id ? {...t,done:!t.done} : t));

  const remove = (id) =>
    setTodos(prev => prev.filter(t => t.id !== id));

  return (
    
       setInput(e.target.value)}
             onKeyDown={e => e.key==="Enter" && addTodo()} />
      
      
        {todos.map(t => (
          
             toggle(t.id)}>{t.text}
            
          
        ))}
      
    
  );
}

← React Build Optimisation Next: React Ecosystem Overview →

Topic Quiz · 5 questions

Test your understanding before moving on

1. How should you update an array in React state?

💡 Always return a new array in React — never mutate state directly.

2. How do you add an item to a state array?

💡 Use spread to create a new array: setState(prev => [...prev, newItem]).

3. How do you remove an item from a state array?

💡 Array.filter() creates a new array excluding the item — the React way.

4. How do you toggle a boolean in an object?

💡 Use .map() to return a new array with the updated object — preserve immutability.

5. What is the key prop required for?

💡 Keys must be unique and stable — they help React efficiently update lists.

Quick Access

Real Project: Todo App

Todo App with React

Test your understanding before moving on