وقتی به کار با لیست‌ها در React می‌پردازید، اهمیت استفاده از JSX و مفهوم کلیدها (Keys) در رندر کردن لیست‌ها آشکار می‌شود. در React، برای نمایش مجموعه‌ای از داده‌ها به شکل لیست، از متد map که در جاوااسکریپت وجود دارد، به وفور استفاده می‌شود. با استفاده از این متد، می‌توانید عنصرهای JSX را از روی داده‌ها تولید کنید و به این شکل، آرایهٔ اصلی را به یک لیست از عناصر JSX تبدیل کنید.
فرض کنید شما یک آرایه از نام افراد دارید و می‌خواهید این نام‌ها را به شکل یک لیست به کاربر نمایش دهید. این کار بسیار ساده است؛ کافی است که این آرایه را با استفاده از متد map تبدیل به مجموعه‌ای از
استفاده از کلید در لیست‌ها، مفهوم دیگری از بهینه‌سازی است که کاربردهای خاص خود را دارد. وقتی یک پارامتر key در JSX اختصاص داده می‌شود، React می‌تواند مستقیماً به تغییرات اعمال شده بر عناصر خاص لیست واکنش نشان دهد و این موضوع به‌ویژه در اجرای بهینهٔ رابط کاربری تأثیرگذار است. بنابراین، در هنگام رندر کردن لیست‌ها همیشه باید اطمینان حاصل کنید که هر عنصر دارای یک key یکتاست.
کلیدها معمولاً به نوعی از دادهٔ یکتا مثل ID درون آرایه استفاده می‌کنند. اگر ID یکتا نداشته باشید، می‌تواند از اندیس هر عنصر در آرایه استفاده کنید، اما این کار توصیه نمی‌شود مگر اینکه هیچ گزینهٔ دیگری وجود نداشته باشد چون استفاده از اندیس می‌تواند در برخی سناریوها منجر به مشکلاتی شود.
نمونه کد برای کار با لیست‌ها در React
<ul>
{names.map((name, index) => (
<li key={index}>{name}</li>
))}
</ul>
توضیح کد به خط
<ul>ایجاد یک تگ unordered list برای نمایش لیست اسامی
{names.map((name, index) =>متد map جاوااسکریپت روی لیست names اجرا شده و برای هر عنصر آن، یک عنصر JSX برگردانده می‌شود
<li key={index}>ایجاد یک عنصر list item برای هر نام و اختصاص یک key با استفاده از اندیس
{name}استفاده از نام درون JSX برای نمایش
</li>بستن تگ list item
</ul>بستن تگ unordered list