ساخت Todo List در React – تمرین عملی با useState و map

Todo List یکی از بهترین تمرین‌ها برای ترکیب مفاهیم پایه React است: state با useState، رویداد کلیک، رندر لیست با map و key برای هر آیتم. در این آموزش یک لیست کارهای روزانه می‌سازیم که کاربر بتواند آیتم جدید اضافه کند و بلافاصله در صفحه ببیند.

این پروژه چه مهارت‌هایی را پوشش می‌دهد؟

منطق برنامه

1. state اولیه یک آرایه خالی است.
2. کاربر متن را در input وارد می‌کند.
3. با کلیک «اضافه کنید»، مقدار input به آرایه اضافه می‌شود.
4. input خالی می‌شود تا todo بعدی وارد شود.
5. لیست با map در <ul> نمایش داده می‌شود.

کد کامل

import { useState } from "react";

export default function TodoList() {
  const [todos, setTodos] = useState([]);

  function clickHandler() {
    const inputElement = document.getElementById("todoInput");
    const newTodo = inputElement.value;

    if (newTodo.trim() === "") return;

    setTodos(todos.concat(newTodo));
    inputElement.value = "";
  }

  return (
    <div>
      <h2>لیست کارهای روزانه</h2>
      <input
        type="text"
        placeholder="تودوی خود را وارد کنید"
        id="todoInput"
      />
      <button onClick={clickHandler}>اضافه کنید</button>

      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

توضیح تابع clickHandler

1. document.getElementById("todoInput") — input را از DOM می‌گیرد.

   در React معمولاً از Controlled Component (state برای value input) استفاده می‌شود؛ این روش برای تمرین اولیه قابل قبول است.

2. مقدار input در newTodo ذخیره می‌شود.

3. setTodos(todos.concat(newTodo)) — آرایه جدید ساخته و state به‌روز می‌شود.

4. input خالی می‌شود تا کاربر todo بعدی را بنویسد.

روش‌های افزودن به آرایه state

// روش ۱: concat
setTodos(todos.concat(newTodo));

// روش ۲: Spread Operator (رایج‌تر)
setTodos([...todos, newTodo]);

هر دو روش آرایه جدید می‌سازند؛ React تغییر state را تشخیص می‌دهد و دوباره رندر می‌کند.

بهبودهای پیشنهادی برای مرحله بعد

• Controlled input: مقدار input را در state نگه دارید (value + onChange).
• شناسه یکتا: به‌جای index، برای هر todo یک id بسازید.
• حذف آیتم: دکمه حذف با filter روی آرایه.
• Enter برای افزودن: رویداد onKeyDown روی input.

جمع‌بندی

Todo List پل ارتباطی بین مفاهیم جداگانه React است. با useState داده را نگه دارید، با رویداد آن را تغییر دهید و با map نمایش دهید. همین الگو پایه پروژه‌های بزرگ‌تر — از سبد خرید تا مدیریت وظایف — است. پس از تسلط بر این نسخه، سراغ Controlled Component و حذف/ویرایش آیتم بروید.