عرض قائمة

جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 35 من 42.

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

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

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

تقوم map باستدعاء الدالة السهمية (arrow function) الخاصة بك مرة واحدة لكل عنصر وتجمع عناصر <li> المرجعة. يقوم React بتقديم (render) المصفوفة بأكملها. أضف fruit إلى البيانات وتنمو القائمة من تلقاء نفسها؛ لا تتغير أجزاء التأشير (markup) أبداً.

يمنح المعلم key={fruit} كل عنصر هوية ثابتة. سنتعرف على المزيد حول هذا الموضوع في الدرس القادم؛ في الوقت الحالي، احرص دائمًا على تضمين key فريد في العنصر الذي تقوم بإرجاعه من map عبر return.

التحدي

سهل

قم بصيرورة (Render) القائمة من البيانات.

داخل <ul id="fruit-list">، استخدم map لصيرورة عنصر <li> واحد لكل فاكهة في مصفوفة fruit.
يعرض كل <li> اسم الفاكهة ويستخدمه كـ key.

جرّب بنفسك

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>