import { useState } from 'react' function useLocalStorage(key, initial) { const [value, setValue] = useState(() => { try { return JSON.parse(localStorage.getItem(key)) ?? initial } catch { return initial } }) const set = (v) => { setValue(v); localStorage.setItem(key, JSON.stringify(v)) } return [value, set] } let nextId = Date.now() function TaskInput({ onAdd }) { const [text, setText] = useState('') const submit = (e) => { e.preventDefault() if (!text.trim()) return onAdd({ id: nextId++, text: text.trim(), done: false }) setText('') } return ( ) } function FilterBar({ filter, onChange }) { return (

{['all', 'active', 'done'].map(f => ( ))}

) } function TaskItem({ task, onToggle, onDelete }) { return (

onToggle(task.id)} /> {task.text}

) } export default function App() { const [tasks, setTasks] = useLocalStorage('tasks', []) const [filter, setFilter] = useState('all') const addTask = (task) => setTasks([task, ...tasks]) const toggleTask = (id) => setTasks(tasks.map(t => t.id === id ? { ...t, done: !t.done } : t)) const deleteTask = (id) => setTasks(tasks.filter(t => t.id !== id)) const filtered = tasks.filter(t => filter === 'all' ? true : filter === 'active' ? !t.done : t.done ) return (

Tasks

{filtered.length === 0 &&

No tasks here

}

))}

{tasks.filter(t => !t.done).length} remaining

) }

Build a Complete React App

You've finished the course!