عرض قائمة

عادةً ما تأتي البيانات في مصفوفات، ويحوّل map المصفوفة إلى قائمة من العناصر:

const fruits = ['Apple', 'Banana', 'Cherry'];

<ul>
    {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>

تستدعي map دالتك السهمية مرة واحدة لكل عنصر، وتجمع عناصر <li> التي تُعيدها. يعرض React المصفوفة كاملة. أضف فاكهة إلى البيانات، وستكبر القائمة تلقائيًا؛ ولن يتغير الترميز أبدًا.

تمنح الخاصية key={fruit} كل عنصر هوية ثابتة. سنتناول ذلك بمزيد من التفصيل في الدرس التالي؛ أما الآن، فأدرج دائمًا key فريدًا في العنصر الذي تُعيده من map.