رندر لیست در React – آموزش map، key و نمایش آرایه در JSX

لیست محصولات، کامنت‌ها، پیام‌ها یا کاربران — تقریباً هر اپ React با نمایش مجموعه‌ای از داده سروکار دارد. روش استاندارد برای تبدیل آرایه به JSX، متد map است. در کنار آن، prop key نقش حیاتی در شناسایی هر آیتم و بهینه‌سازی رندر دارد.

چرا map در React؟

متد map هر عنصر آرایه را به یک عنصر JSX تبدیل می‌کند و آرایه‌ای از المان‌های React برمی‌گرداند:

array.map((item) => <Element>{item}</Element>)

ساختار کامل:

array.map((item) => {
  return <element>{item}</element>;
});

مثال ۱: لیست ساده رشته‌ها

export default function NameList() {
  const names = ["علی", "مریم", "رضا"];

  return (
    <div>
      {names.map((name) => (
        <h2 key={name}>{name}</h2>
      ))}
    </div>
  );
}

اهمیت prop key

React با key هر آیتم را در لیست شناسایی می‌کند. بدون key، به‌روزرسانی لیست (اضافه، حذف، جابجایی) ممکن است ناکارآمد یا دارای باگ باشد.

names.map((name, index) => (
  <h2 key={index}>{name}</h2>
))

مثال ۲: رندر لیست آبجکت‌ها

در داده‌های واقعی، هر آیتم معمولاً یک شناسه یکتا دارد:

export default function UserList() {
  const users = [
    { id: 1, name: "علی", age: 20 },
    { id: 2, name: "مریم", age: 22 },
    { id: 3, name: "رضا", age: 25 },
  ];

  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>سن: {user.age}</p>
        </div>
      ))}
    </div>
  );
}

map در JSX: قوانین کوتاه

• نتیجه map را داخل {} قرار دهید.
• key را روی بالاترین عنصر برگشتی از map بگذارید، نه روی فرزند داخلی.
• از map برای ** side effect** استفاده نکنید؛ فقط برای تولید JSX.

map در مقابل حلقه for

جمع‌بندی

رندر لیست با map یکی از پرتکرارترین الگوها در React است. آرایه را map کنید، هر آیتم را به JSX تبدیل کنید و حتماً key پایدار و یکتا تعیین کنید. با رعایت این اصول، لیست‌های پویا — از منوی ساده تا جدول داده — سریع، خوانا و بدون باگ پیاده‌سازی می‌شوند.